文章目录
- [Three.js 骨骼动画工程实战：AnimationMixer、剪辑与混合权重调参](#Three.js 骨骼动画工程实战：AnimationMixer、剪辑与混合权重调参)
Three.js 骨骼动画工程实战：AnimationMixer、剪辑与混合权重调参
GLTF 角色落地后，真正决定「手感」的是 AnimationMixer 与 AnimationAction 的组合使用：谁在更新时钟、谁在裁剪骨骼、混合权重如何衰减，都直接影响性能与表现。
一、最小可用管线
mixer = new THREE.AnimationMixer(root)，root通常取 SkinnedMesh 或包含骨架的 Group。const clip = THREE.AnimationClip.findByName(animations, 'Run')取剪辑；action = mixer.clipAction(clip)。- 每帧：
mixer.update(delta)，且 delta 必须用真实帧间隔 （clock.getDelta()），不要用固定1/60糊弄。
javascript
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const dt = clock.getDelta();
mixer.update(dt);
renderer.render(scene, camera);
}二、多动作混合与优先级
- fadeIn / fadeOut：切换站立↔跑步时用淡入淡出，避免瞬时跳变。
- setEffectiveWeight：上层逻辑（如受伤、瞄准）叠加时，用权重而不是开多个 Mixer。
- stop / reset ：切场景前对
action.stop()，并从 Map 里移除引用，防止闭包持有旧SkinnedMesh。
三、工程坑点
| 现象 | 常见原因 | 处理 |
|---|---|---|
| 动画「抽搐」 | 同一骨骼被多个 Action 强混合 | 降低冲突轨权重或使用掩码 |
| CPU 飙高 | 每帧全量 mixer.update 且剪辑极多 |
只更新可见角色；远处降采样 |
| 内存涨 | Clip 未复用、重复 clipAction |
缓存 Map<name, AnimationClip> |
四、结语
骨骼动画的稳定性来自 单一 Mixer 时钟 与 成对的 play/stop。把更新与资源释放写进路由/关卡生命周期，线上才不会「切场景后越跑越卡」。