Three.js-动画

动画系统介绍

three.js docs

动画是一个很成熟的领域，已经形成业界标准的概念和工作流了，因此不同库对于动画的设计，都是相似的。比如UE、Unity、Three.js、ZRender里面，都可以看到拆分了clip(片段)、track(关键帧轨道)等部分。

名词概念

参考Untangling the ThreeJS animation structure · Issue #6881 · mrdoob/three.js · GitHub

单词 翻译 用途
clip 动画片段(也有翻译为剪辑的，但是感觉没有片段好)
track 轨道 呈现动画的时间线，理解时想象一下剪辑软件下方的轨道界面
KeyframeTrack 关键帧轨道 关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。
tracks 一个由关键帧轨道（KeyframeTracks）组成的数组。
action 动画行为
mixer 混合器 a container for a number of actions.
animator 动画师 mixer之上的结构，用于操控动画逻辑
时间线 动画控制，就是控制时间线上的动画行为

I think a structure similar to this might be the way forward:

  • Track - a keyframe animation that contains a name, a set of keys that are composed of times and values. Keys can be weights, or pos/rot/scale. The name of the track can refer to morphTargets or bones/nodes or possibly other values within a node. (We could even abstract Track to not be keyframed, it could be equation based as well if we get the interface right.)
  • Clip - a set of tracks with a name, duration. An animation sequence, such as blink, walk, jump, etc. Can be a morph or a keyframe or maybe both. Similar to Unity’s AnimationClip class
  • Action - a clip that is being played. Would be associated with a root node to which the Track names would be relative. Would have a blend weight associated with it and can be queued into animation system. Could optionally loop and have a play speed. (Will likely require more parameters for various edge cases.) Similar to Unity’s AnimationState class
  • Mixer - a container for a number of actions. Would be responsible for applying the actions to the hierarchy – it would be sort of like AnimationHandler, it could be global or there could be multiple – I’m open on this case. It would be responsible for blending between actions.
  • Animator - a higher level structure on top of Mixer that would contain the logic to do things like walk, run, jump, it would do that by managing what actions are queued up and how they are blended between in order to create a smooth result. (Will have to be easy to extend to support new entity behaviors.) Similar to Unity’s Animator class

I would get rid of AnimationHandler, Animation (replaced by Clip/Track), KeyframeAnimation (replaced by Track), MorphAnimation (replaced by Track), BlendCharacter (replaced by Mixer/Clip/Track), MorphAnimMesh (replaced by Mixer/Clip/Track), MorphBlendMesh (replaced by Animator/Mixer/Clip/Track), USCCharacter, MD2Character, MD2CharacterComplex (replaced by Animator/Mixer/Clip/Track), or at least deprecate them in favor for the Track/Clip/Action/Mixer/Animator design, and this design could drive any objects in ThreeJS, including Materials, Lights and Cameras, if you so desired.

Basically this is a more flexible and actually simpler design.

The above is very similar to Unity/Unreal Engine.

基于Animator/Mixer/Clip/Track的设计，是扩展性更好的原子化设计，也是UE和Unity的设计。可以去看下UE和Unity动画相关的文档，做细粒度的了解。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let mesh;

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

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

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

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

教程

操控模型动画：

three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller - YouTube

对应的github：

https://github.com/tamani-coding/threejs-character-controls-example