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

文章目录一、Mixer 与 Root 对象二、主循环里必须 update三、剪辑切换与淡入淡出四、时间缩放与暂停五、卸载与 dispose六、结语角色与机械臂一类资源进入场景后动画往往以AnimationClip形式存在工程里真正驱动播放的是AnimationMixer与若干AnimationAction。本文聚焦「怎么接进主循环、怎么切换状态、怎么控速与清理」。一、Mixer 与 Root 对象AnimationMixer绑定到SkinnedMesh 所在子图或其共同父节点视导出结构而定。常见写法constmixernewTHREE.AnimationMixer(model);constactionmixer.clipAction(gltf.animations[0]);action.play();二、主循环里必须 update每帧传入秒为单位的时间增量constclocknewTHREE.Clock();functiontick(){constdtclock.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对称。