如何使用Three.js为带骨骼的GLB格式3D角色添加Mixamo动画

前置准备 #

先将Mixamo下载的FBX动画文件通过Blender转换为GLB格式：

• 导入FBX动画到Blender后，删除多余的网格、材质资源，仅保留动画数据
• 确认动画骨骼命名与你现有的GLB角色骨骼命名完全一致，不一致的话先在Blender里完成重命名匹配
• 导出时勾选「烘焙动画」选项，导出为单文件GLB格式即可

实现步骤 #

• 加载角色GLB时同步初始化AnimationMixer（动画混合器），用于后续驱动骨骼动画
• 单独加载处理好的Mixamo动画GLB文件，提取动画剪辑挂载到角色的动画混合器上
• 在渲染循环中通过Clock获取帧间隔时间，更新动画混合器状态实现动画播放

完整代码示例 #

<html>
  <body>
    <div id="navbar"><span>Three.js </span></div>
    <script src="http://threejs.org/build/three.min.js"></script>
    <script type="module">
      import { GLTFLoader } from 'https://server:8000/sm/loaders/GLTFLoader.js';
      
      // 基础场景初始化
      var scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      
      // 动画相关变量
      let mixer, clock = new THREE.Clock();
      let currentAction;
      
      // 加载角色模型
      const loader = new GLTFLoader();
      loader.load('./model.glb', function (gltf) {
        const character = gltf.scene;
        scene.add(character);
        
        // 初始化角色动画混合器
        mixer = new THREE.AnimationMixer(character);
        
        // 加载Mixamo转好的动画GLB
        loader.load('./mixamo_animation.glb', function (animGltf) {
          // 提取动画剪辑
          const clip = animGltf.animations[0];
          // 挂载剪辑到混合器，播放动画
          currentAction = mixer.clipAction(clip);
          currentAction.play();
        }, undefined, function (error) {
          console.error('动画加载失败:', error);
        });
      }, undefined, function (error) {
        console.error('角色加载失败:', error);
      });
      
      // 调整相机位置对准角色
      camera.position.z = 5;
      
      // 渲染循环
      function animate() {
        requestAnimationFrame(animate);
        // 更新动画
        if (mixer) {
          const delta = clock.getDelta();
          mixer.update(delta);
        }
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

常见问题说明 #

• 如果动画没有正常播放，优先检查骨骼命名是否匹配，可在控制台打印角色骨骼列表和动画骨骼列表做对比
• 如果需要切换多个动画，可存储所有动画剪辑的clipAction实例，调用play()/stop()/crossFadeTo()方法实现动画切换和过渡效果

内容的提问来源于stack exchange，提问作者inzack