2024-08-13 three.js 动画系统

1. AnimationClip：动画片段

保存着某个活动的数据，比如一个mesh，可以三个动画片段，一个AnimationClip是跳跃，一个AnimationClip是行走，一个AnimationClip是微笑。动画片段的创建依靠关键帧。

const animationClip = new THREE.AnimationClip('positionAnimation', 2, [positionKeyFrameTrack, colorKeyFrameTrack]);

positionKeyFrameTrack和colorKeyFrameTrack就是关键帧。
如果是将blender模型导入到项目，有一个字段animations是一个数组，里面包含了所有的动画片段。

2：KeyframeTrack：关键帧

关键帧描述了某个动画片段内属性的详细的变化情况，本质就是描述了物体的属性变化，比如，某一个动画片段是物体在移动，这个动画片段的关键帧就是position的坐标随着时间的变化情况。

const positionTimes = [0, 2]; // 在0s时，有一个关键帧；在1s时，有一个关键帧
const positionVecs = [
    -1, -1, 0, // times[0]对应的关键帧
    1, 1, 0 // times[1]对应的关键帧
]
const positionKeyFrameTrack = new THREE.VectorKeyframeTrack('point.position', positionTimes, positionVecs);

关键帧组成了动画片段，有了动画片段就可以进行播放。

3: AnimationMixer:动画混合器，AnimationAction：动画行为

在3D场景中，一个动画一般是由多个动画片段组成。
动画混合器类似于一个中央控制台，控制着一个动画的播放进度。
动画行为控制着某一个动画片段何时播放、暂停， 这个AnimationClip是否需要重复播放以及重复的频率.

const mixer = new THREE.AnimationMixer(scene); // 要控制的对象是scene的后代

// 在每一帧中更新mixer,其实就是更新整个动画的进度
function update () {
    mixer.update( deltaSeconds );
}
const action2 = mixer.clipAction( 2clip );
const action3 = mixer.clipAction( 3clip );
action2.play()
action3.play()

整体理解：

动画混合器（AnimationMixer）控制整个动画的播放进度，类似于电影播放的进度条，一个动画由多个动画片段（AnimationClip）组成，每个动画片段由关键帧（KeyframeTrack）组成，AnimationAction控制着每个动画片段的播放、暂停、等等。