Three.js 动画系统Animation System从会动到会演原文出处Three.js Manual – Animation System本文基于官方手册 Animation System 章节整理。这是手册里偏进阶的一篇——当你不再满足于让立方体匀速转想把骨骼角色、表情变形、多段动画融合玩明白时就该看它了。写在前面前面那些篇里物体的运动都是我们自己在渲染循环里手动改position/rotation——转圈、抛物线、呼吸缩放全是硬算。但真实的 3D 角色动画走路、跳跃、挥手哪是几行代码能算出来的那是美术在 Blender 里一帧帧 K 出来的关键帧导出成数据文件再让 three.js 播放出来。这套播放机制就是 three.js 的动画系统。它架构参考了 Unity / 虚幻 4。这篇带你认全它的几个核心零件以及怎么让它们协同工作。一、动画系统能干什么先说它能动画化的东西范围比你想的大骨骼蒙皮绑定模型的骨头、变形目标morph targets材质属性颜色、透明度、布尔开关可见性visibility、以及物体的位移/旋转/缩放而且它不只是播一遍——支持淡入、淡出、交叉淡入crossfade、时间缩放warp同一个物体上同时跑的多个动画权重和时间速度可以独立调不同物体上的动画还能同步播放。二、核心零件五层结构官方把这套系统拆成了几个概念从数据到播放层层递进。记不住没关系看完下面这个链条就通了。1. AnimationClip动画片段——“一段表演”当你用GLTFLoader加载一个带动画的模型返回结果里会有一个叫animations的数组里面就是若干AnimationClip。每个 Clip 通常对应模型的一个动作。比如一个角色走路一个 Clip、跳跃一个 Clip、侧移一个 Clip……各管各的。2. KeyframeTrack关键帧轨道——“一个属性的变化曲线”一个 Clip 内部每个被动画化的属性单独存在一条KeyframeTrack里。举个角色的例子假设它有骨架那么——一条轨道记录小臂骨位置随时间的变化另一条记录同一个骨头旋转的变化再一条记录另一个骨头的位置/旋转/缩放一个 Clip 往往就是由一大堆这样的轨道叠出来的。如果模型用了变形目标比如一张笑脸 morph、一张怒脸 morph那每条轨道记录的就是某个 morph 的影响力在这段动画里怎么变。3. AnimationMixer动画混合器——“播放器 调音台”Clip 只是静态数据真正靠AnimationMixer。它能同时管好几条动画把它们混合、融合在一起。比如你让走路和挥手同时播就是 mixer 把两条轨道叠起来。4. AnimationAction动画动作——“对 mixer 下的指令”Mixer 自身的方法和属性很少真正的控制靠AnimationAction。通过配置一个 Action你能决定某个 Clip 什么时候播放/暂停/停止、要不要循环、播几遍、是否带淡入淡出或时间缩放还有交叉淡入、同步等高级操作。可以理解成Action 是你发给 mixer 的演出指令单。5. AnimationObjectGroup动画对象组——“一群物体共用一套状态”如果你有一组物体想共享同一套动画状态用AnimationObjectGroup把它们归一组就行省得一个个挂。三、哪些格式/Loader 才带动画目前支持导出AnimationClip序列的 Loader 主要有ObjectLoaderBVHLoaderColladaLoaderFBXLoaderGLTFLoader四、最小可跑示例把上面概念串起来核心代码其实就几行letmesh;// 1) 创建混合器绑定到你的模型并拿到它带的动画片段列表constmixernewTHREE.AnimationMixer(mesh);constclipsmesh.animations;// 2) 每帧都要更新 mixerdeltaSeconds 这一帧过去了多少秒functionupdate(){mixer.update(deltaSeconds);}// 3) 播放某个指定动画按名字找 ClipconstclipTHREE.AnimationClip.findByName(clips,dance);constactionmixer.clipAction(clip);action.play();// 4) 或者把模型的全部动画都播起来clips.forEach(function(clip){mixer.clipAction(clip).play();});几个要点Mixer 必须每帧update(deltaSeconds)否则动画不动。注意传的是距上一帧的秒数不是绝对时间。mixer.clipAction(clip)把一个 Clip 变成可控制的AnimationAction。action.play()才是真正开播。总结零件角色类比AnimationClip一段动作的数据一段录好的表演KeyframeTrack单个属性的变化曲线表演里某条音轨AnimationMixer播放 混合控制调音台AnimationAction播放/暂停/循环/淡入等指令演出指令单AnimationObjectGroup多物体共享动画状态编组管理模型导出带animations→new AnimationMixer(mesh)→ 每帧mixer.update(delta)→clipAction(clip).play()。Action 才是你后续做淡入淡出、交叉融合的操纵杆。延伸阅读AnimationMixer APIAnimationAction APIGLTFLoader 文档SkinnedMesh蒙皮网格