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糊弄。constclocknewTHREE.Clock();functionanimate(){requestAnimationFrame(animate);constdtclock.getDelta();mixer.update(dt);renderer.render(scene,camera);}二、多动作混合与优先级fadeIn / fadeOut切换站立↔跑步时用淡入淡出避免瞬时跳变。setEffectiveWeight上层逻辑如受伤、瞄准叠加时用权重而不是开多个 Mixer。stop / reset切场景前对action.stop()并从 Map 里移除引用防止闭包持有旧SkinnedMesh。三、工程坑点现象常见原因处理动画「抽搐」同一骨骼被多个 Action 强混合降低冲突轨权重或使用掩码CPU 飙高每帧全量mixer.update且剪辑极多只更新可见角色远处降采样内存涨Clip 未复用、重复clipAction缓存Mapname, AnimationClip四、结语骨骼动画的稳定性来自单一 Mixer 时钟与成对的 play/stop。把更新与资源释放写进路由/关卡生命周期线上才不会「切场景后越跑越卡」。