Three.js AnimationMixer 工程实战：骨骼动画、剪辑切换与时间缩放

qq_12084093712026-04-20 13:03

文章目录

- [一、Mixer 与 Root 对象](#一、Mixer 与 Root 对象)
- [二、主循环里必须 update](#二、主循环里必须 update)
- 三、剪辑切换与淡入淡出
- 四、时间缩放与暂停
- [五、卸载与 dispose](#五、卸载与 dispose)
- 六、结语

角色与机械臂一类资源进入场景后，动画往往以 AnimationClip 形式存在；工程里真正驱动播放的是 AnimationMixer 与若干 AnimationAction。本文聚焦「怎么接进主循环、怎么切换状态、怎么控速与清理」。

一、Mixer 与 Root 对象

AnimationMixer 绑定到 SkinnedMesh 所在子图 或其 共同父节点（视导出结构而定）。常见写法：

js 复制代码

const mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

二、主循环里必须 update

每帧传入秒为单位的时间增量：

js 复制代码

const clock = new THREE.Clock();
function tick() {
  const dt = clock.getDelta();
  mixer.update(dt);
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}

若用固定步长或慢动作，可对 dt 做 clamp 或乘以 timeScale。

三、剪辑切换与淡入淡出

action.fadeOut(duration) / fadeIn(duration) 降低硬切带来的跳变。
交叉淡化：prevAction.crossFadeTo(nextAction, 0.3, false)。
同一 Mixer 上可同时存在多个 Action，注意权重与有效状态。

四、时间缩放与暂停

action.timeScale = 0.5 半速播放；负值可倒放（视剪辑是否支持）。
action.paused = true 暂停单条；mixer.timeScale = 0 暂停全部。

五、卸载与 dispose

切路由或销毁模型时：

action.stop() 并 mixer.uncacheRoot(root) / 停止所有 action。
释放引用，避免闭包持有旧 mixer。

六、结语

动画系统本质是 状态机 + 时间积分 ：update(delta) 是契约，剪辑切换要 fade/crossFade ，卸载路径要与 dispose 对称。