Three.js中GLTFLoader加载多动画（模型+相机）同步播放异常求助

嘿，根据你描述的情况——Blender导出的GLB文件（包含飞船模型动画和动画相机）在在线查看器里运行正常，但在Three.js脚本中单独播放任一动画都没问题，同时播放就出异常——这大概率是动画轨道更新冲突或者AnimationMixer管理不当导致的，给你几个排查和解决的方向：

• 给模型和相机分别创建独立的AnimationMixer
  很多时候新手会把两个动画绑定到同一个mixer里，而模型和相机的变换层级不同，容易出现属性更新冲突。试试初始化两个独立的混合器：

  // 为飞船模型和动画相机分别创建混合器
  const shipMixer = new THREE.AnimationMixer(yourShipModel);
  const cameraMixer = new THREE.AnimationMixer(yourAnimatedCamera);
  
  // 绑定对应的动画剪辑
  const shipAction = shipMixer.clipAction(shipAnimationClip);
  const cameraAction = cameraMixer.clipAction(cameraAnimationClip);
  
  // 在渲染循环里分别更新两个混合器
  function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    shipMixer.update(delta);
    cameraMixer.update(delta);
    renderer.render(scene, camera);
  }
  

• 确认动画的播放模式与权重设置
  同时播放时，动画的循环模式或者权重设置可能会互相干扰。可以显式配置每个动画的参数，避免意外覆盖：

  // 配置飞船动画
  shipAction.setLoop(THREE.LoopRepeat, Infinity);
  shipAction.setEffectiveWeight(1);
  shipAction.play();
  
  // 配置相机动画
  cameraAction.setLoop(THREE.LoopRepeat, Infinity);
  cameraAction.setEffectiveWeight(1);
  cameraAction.play();
  

• 检查动画轨道的目标路径是否正确
  虽然在线查看器能正常解析，但Three.js的GLTFLoader对动画路径的处理可能有细微差异。可以通过控制台打印动画轨道，确认目标对象是否正确：

  console.log("飞船动画轨道:", shipAnimationClip.tracks);
  console.log("相机动画轨道:", cameraAnimationClip.tracks);
  

  确保相机动画的轨道确实指向你的动画相机，而不是场景里的其他相机或对象。

• 排查是否有意外的动画状态修改
  检查一下有没有其他代码（比如事件回调）不小心暂停、停止或者缩放了其中一个动画，确保所有动画状态的控制都在你的播放逻辑里。

还有个快速测试方法：把其中一个动画的播放时间延迟100ms左右，如果异常消失，那就是初始化阶段的冲突，你可以确保两个动画都完全加载后再同时启动。

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