ThreeJS — KeyFrameAnimation & Bone

type

status

date

slug

summary

KeyFrameAnimation

所谓关键帧动画，你可以理解为在时间轴上，选择几个关键的时间点，然后分别定义这几个时间点对应物体状态(比如位置、姿态、颜色等)，然后基于几个关键的时间——状态数据，生成连续的动画。

使用步骤

模型命名

KeyframeTrack设置关键帧数据

创建关键帧动画AnimationClip

AnimationMixer播放关键帧动画

mixer.update()更新播放器AnimationMixer时间

动画动作对象`AnimationAction` 属性

循环属性.loop

控制动画是否循环播放

.clampWhenFinished属性

模型停留在关键帧动画结束的状态

.play()

播放

.stop()

停止结束动画

.paused

是否暂停播放

.timeScale

倍速播放

.time

开始播放时间

.duration

播放结束时间

动画停留在任意时间

外部模型

如果一个模型中存在动画，可以通过属性获取 gltf.animations

gltf.animations是一个数组，如果没有帧动画数据，就是一个空数组，有帧动画数据的情况下，里面可能1个或多个Clip动画对象AnimationClip

变形动画

.morphAttributes设置几何体变形目标顶点数据

.morphTargetInfluences权重系数控制变形程度

mesh的几何体变形目标是放在一个数组.morphAttributes.position中的，设置权重系数morphTargetInfluences的时候，需要设置索引值，比如.morphTargetInfluences[0]影响的变形目标是.morphAttributes.position[0]，.morphTargetInfluences[1]影响的变形目标是.morphAttributes.position[1]