该技能用于在 Three.js 中实现动画:播放动画片段、在动画状态之间做交叉淡化(crossfade),以及从 GLTF 文件加载骨骼动画。
核心结构与规则:动画由 AnimationClip(关键帧轨道数据)、AnimationAction(播放控制器,负责 play、pause、fade、crossfade)、AnimationMixer(调度器,每个带动画的根对象仅一个)和 Clock(为 mixer.update 提供 delta 时间)组成。必须为每个动画根对象只创建一个 AnimationMixer,并在渲染循环中每帧调用 mixer.update(delta);不要直接实例化 AnimationAction,始终通过 mixer.clipAction(clip) 获取。
主要能力:AnimationMixer 提供 clipAction、existingAction、update、setTime、stopAllAction、getRoot、uncacheAction/uncacheClip/uncacheRoot,并可监听 finished、loop 事件;AnimationAction 支持播放、停止、重置、循环模式(LoopOnce、LoopRepeat、LoopPingPong)、淡入淡出与 crossFadeFrom/crossFadeTo、速度控制(halt、warp、setDuration、setEffectiveTimeScale)及查询方法;支持 Normal 与 Additive 混合模式、关键帧轨道类型(Vector3、Quaternion、Number、Boolean、Color、String)和插值模式(Discrete、Linear、Smooth)。
典型用法:从 GLTFLoader 加载模型后创建 mixer,用 gltf.animations.forEach 遍历播放;角色状态机中先把各 clip 缓存为 actions,切换时对目标 action 调用 reset、setEffectiveTimeScale、setEffectiveWeight、crossFadeFrom 后再 play。使用 LoopOnce 时需设置 clampWhenFinished 为 true,重播已停止或已结束的 action 前先调用 reset。用 THREE.Clock 或 renderer.setAnimationLoop 获取稳定帧时间,不要用 new Date() 或 performance.now() 手动计算 delta。
适用场景:Three.js 角色骨骼动画、状态切换、分层叠加动画(如呼吸、受击、瞄准偏移)以及 morph target 动画。限制与更多细节可参考其 references 中的 methods.md、examples.md、anti-patterns.md 与官方 Three.js 文档。