three.js动画(Animation)

导航

一、three.js的动画解析基本流程
二、各部分功能介绍
三、threejs的动画类型
四、threejs对动画的处理过程

一、three.js的动画解析基本流程

var mesh;  //导出外部文件获得

// 新建一个AnimationMixer, 并取得AnimationClip实例列表
var mixer = new THREE.AnimationMixer( mesh );
var clips = mesh.animations;

// 在每一帧中更新mixer
function update () {
	  mixer.update( deltaSeconds );
}

// 播放一个特定的动画
var clip = THREE.AnimationClip.findByName( clips, 'dance' );
var action = mixer.clipAction( clip );
action.play();

// 播放所有动画
clips.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );

二、各部分功能介绍

1. Animation Clips：动画片段
   导入的对象中有一个数组为animations，该数组中储存的就是AnimationClip对象。
   每个AnimationClip通常保存对象某个活动的数据。
   举个例子，假如mesh是一个角色，可能有一个AnimationClip实现步行循环， 第二个AnimationClip实现跳跃，第三个AnimationClip实现闪避等等。
2. Keyframe Tracks：关键帧轨道
   每一个AnimationClip里面，所有的动作轨迹都储存在一个tracks数组中，tracks数组中每个动画的数据都是一个单独的KeyframeTrack。
3. Animation Mixer：动画混合器
   存储的数据仅构成动画的基础 —— 实际播放由AnimationMixer控制。
   主要方法为：
   mixer = new THREE.AnimationMixer(mesh); //通过mesh获取到AnimationMixer对象 action =
   mixer.clipAction(clip);//用clipAction方法生成可以控制执行动画的实例
4. Animation Actions：动画行为
   通过AnimationMixer生成AnimationAction实例，再通过配置AnimationAction，您可以决定何时播放、暂停或停止其中一个混合器中的某个AnimationClip，还有是否需要重复播放以及重复的频率，是否需要使用淡入淡出或时间缩放，以及一些其他内容，具体参考其api文档。
5. Animation Object Groups：动画对象组
   将AnimationClip对象加入组中，并将这个组对象作为根对象传递。

三、threejs的动画类型

主要种类有Morph（变形）动画，关节动画和骨骼蒙皮动画(SkinnedMesh)。
从动画数据的角度来说，三者一般都采用关键帧技术，即只给出关键帧的数据，其他帧的数据使用插值得到。但由于这三种技术的不同，关键帧的数据是不一样的。

1. Morph（渐变，变形）动画是直接指定动画每一帧的顶点位置，其动画关键中存储的是Mesh所有顶点在关键帧对应时刻的位置。
2. 关节动画的模型不是一个整体的Mesh,而是分成很多部分(Mesh)，通过一个父子层次结构将这些分散的Mesh组织在一起，父Mesh带动其下子Mesh的运动，各Mesh中的顶点坐标定义在自己的坐标系中，这样各个Mesh是作为一个整体参与运动的。动画帧中设置各子Mesh相对于其父Mesh的变换（主要是旋转，当然也可包括移动和缩放），通过子到父，一级级的变换累加（当然从技术上，如果是矩阵操作是累乘）得到该Mesh在整个动画模型所在的坐标空间中的变换（从本文的视角来说就是世界坐标系了，下同），从而确定每个Mesh在世界坐标系中的位置和方向，然后以Mesh为单位渲染即可。关节动画的问题是，各部分Mesh中的顶点是固定在其Mesh坐标系中的，这样在两个Mesh结合处就可能产生裂缝。
3. 骨骼蒙皮动画SkinnedMesh，骨骼蒙皮动画的出现解决了关节动画的裂缝问题，骨骼动画的基本原理可概括为：在骨骼控制下，通过顶点混合动态计算蒙皮网格的顶点，而骨骼的运动相对于其父骨骼，并由动画关键帧数据驱动。一个骨骼动画通常包括骨骼层次结构数据，网格(Mesh)数据，网格蒙皮数据(skin
   info)和骨骼的动画(关键帧)数据。

四、Threejs对动画的处理过程

1. 变形动画：导入geometry，geometry中包含morphTargets数据，threejs动画编辑器可以根据此数据编辑出动画片段。

THREE.AnimationClip.CreateFromMorphTargetSequence('run',geometry.morphTargets, 30);

2. 骨骼蒙皮动画：导入一个包含animations数据的对象，根据此数据即可创建出动画片段。

THREE.AnimationClip.findByName( clips, 'dance' );