Animation system

Overview

在three.js动画系统中，您可以对模型的各种属性进行动画处理：皮肤和装备模型的骨骼，morph targets，不同的材质（颜色，不透明度，布尔值），可见度和变换。动画属性可以褪色，淡化，交叉淡化和翘曲。同一物体以及不同物体上不同的同步动画的重量和时间尺度可以独立改变。 同一和不同对象上的各种动画可以同步。

为了在一个均项系统中实现所有这一切，在2015年，three.js动画系统已经完全改变（这是过时的信息！），它现在的架构类似于Unity /Unreal Engine 4。该页面简要概述了系统的主要组成部分以及它们如何协同工作。

Animation Clips(动画剪辑)

如果您已成功导入动画3D对象（如果它具有骨骼或变形目标或两者都无关紧要） - 例如，使用Blender exporter将其从Blender导出，并使用JSONLoader将其加载到three.js场景中，一个被加载在mesh上的geometry，它应该有一个名为“animations”的属性，并且这个属性是一个数组，其中包含该模型的AnimationClips（请参见下面的可能的加载器列表）。

每个AnimationClip通常保存对象的某个活动的数据。 如果网格是一个角色，例如，可能有一个用于步行循环的AnimationClip，另一个用于跳跃，再一个用于偏离路线等等。

Keyframe Tracks(关键帧轨道)

在一个AnimationClip的内部，每个动画属性的数据都存储在一个单独的KeyframeTrack中。假设有一个角色有一个skeleton，一个关键帧存储随着时间的推移下臂骨位置变化的数据，另一个关键帧跟踪同一个bone的旋转变化数据，再一个关键帧跟踪另一个bone的位置，旋转和比例变化，等等。必须清楚的是，一个AnimationClip由很多这样的轨道组成。

假设模型具有变形目标(morph targets)（例如，一个变形目标显示友好的脸，另一个显示出愤怒的脸），每个轨道保存关于某个变形目标的影响在剪辑执行期间如何变化的信息。

Animation Mixer(动画混音器)

存储的数据仅作为动画的基础，真正的播放是被AnimationMixer控制的。你可以想象这不仅仅是一个动画播放器，而是像一个真正的混音器控制台的模拟器，它可以同时控制多个动画，混合和合并她们。

Animation Actions

AnimationMixer本身有很少的属性和方法，因为它可以被AnimationActions控制。你可以通过配置一个AnimationAction来决定在mixer上一个AnimationClip什么时候被播放，暂停，停止，重复次数，它是否应该淡入淡出或者缩放，和一些其他事情，例如交叉渐变和同步。

Animation Object Groups

如果您希望一组对象接收共享的动画状态，可以使用AnimationObjectGroup。

Supported Formats and Loaders

请注意，并不是所有的模型格式都包括动画（OBJ显然不是），只有一些three.js的装载器支持AnimationClip序列。支持这种动画类型的几个：

• THREE.JSONLoader
• THREE.ObjectLoader
• THREE.BVHLoader
• THREE.FBXLoader
• THREE.GLTFLoader
• THREE.MMDLoader
• THREE.SEA3DLoader
  请注意，3ds max和Maya目前无法将多个动画（意味着不在同一时间线上的动画）直接导出到单个文件。

Example

var mesh;// Create an AnimationMixer, and get the list of AnimationClip instancesvar mixer = new THREE.AnimationMixer( mesh );var clips = mesh.animations;// Update the mixer on each framefunction update () {    mixer.update( deltaSeconds );}// Play a specific animationvar clip = THREE.AnimationClip.findByName( clips, 'dance' );var action = mixer.clipAction( clip );action.play();// Play all animationsclips.forEach( function ( clip ) {    mixer.clipAction( clip ).play();} );

点击跳转原文