首页 / three.js / API 文档

AnimationMixer

先看结论

动画混合器。把动画片段绑定到场景中的对象，按时间推进并混合多段动画，是播放 glTF、FBX 骨骼动画的入口。

最后验证 2026-11-03 · three.js 0.160.0 · 更新 2026-10-29 · 引用本文

new THREE.AnimationMixer(rootObject)

构造参数

参数	说明
`rootObject`	动画作用的对象。片段里的轨道按名称在它的子树上查找目标

方法

方法	返回	说明
`clipAction(clip, optionalRoot, blendMode)`	AnimationAction	为片段创建动作，同名片段只会创建一次
`existingAction(clip, optionalRoot)`	AnimationAction	取已存在的动作，没有则返回 null
`getRoot()`	Object3D	构造时传入的根对象
`update(deltaTime)`	this	推进时间，单位秒，每帧调用
`setTime(timeInSeconds)`	this	直接定位到某个时间点，用于拖动进度
`stopAllAction()`	this	停止所有动作
`uncacheClip(clip)`	—	释放片段相关的缓存
`uncacheRoot(root)`	—	释放根对象相关的缓存
`uncacheAction(clip, optionalRoot)`	—	释放单个动作

事件

事件	说明
`'loop'`	动作每循环一次触发，`event.action` 为对应动作
`'finished'`	非循环动作播放完毕触发

示例：播放模型动画

const loader = new GLTFLoader();

loader.load('/models/escalator.glb', function (gltf) {
  scene.add(gltf.scene);

  const mixer = new THREE.AnimationMixer(gltf.scene);

  gltf.animations.forEach(function (clip) {
    const action = mixer.clipAction(clip);
    action.setLoop(THREE.LoopRepeat, Infinity);
    action.play();
  });

  mixer.addEventListener('finished', function (event) {
    console.log('播放结束', event.action.getClip().name);
  });

  clock.start();

  renderer.setAnimationLoop(function () {
    const delta = clock.getDelta();
    mixer.update(delta);
    renderer.render(scene, camera);
  });
});

时间单位是秒

update 的参数是秒，不是毫秒。用 Clock.getDelta() 直接拿到秒数最稳妥；用 performance.now() 时记得除以 1000。传毫秒会让动画快一千倍，看起来像瞬间跳到了末帧。

动作的播放控制

clipAction 返回的 AnimationAction 才负责播放、暂停、权重与循环方式：

const idle = mixer.clipAction(idleClip);
const walk = mixer.clipAction(walkClip);

idle.play();
walk.play();
walk.setEffectiveWeight(0);       // 先挂上，权重为 0

// 行走时逐渐切换到走路动作
function blendToWalk(t) {
  walk.setEffectiveWeight(t);
  idle.setEffectiveWeight(1 - t);
}

多个模型的隔离

每个独立模型都要有自己的 AnimationMixer。共用同一个混合器会让所有模型共享时间轴，外观相同的实例无法各自停留在不同帧。实例化网格不支持骨骼动画，需要骨骼动画时只能逐个加载模型。

停止播放要调动作。mixer.stopAllAction() 只停动作，模型会停在最后一帧的姿态，不会自动回到初始姿势。需要复位时把动作的 time 设为 0 并 mixer.update(0)。

引用本文

经纬志（2026）。《AnimationMixer》。https://www.jingweizhi.com/three/api/animation-mixer.html（访问日期 2026-11-03）。