Three.js加载GLTF 3D模型无法正确播放目标动画问题求助

问题根因 #

• 你调用useAnimations返回的names是所有动画片段名称组成的数组，直接将数组作为actions的索引取值时，只会匹配到数组第一个元素对应的动画片段，仅电脑X轴旋转的效果就是因为第一个动画片段恰好只有电脑旋转的轨道，风扇轨道对应的其他动画片段没有被触发。
• 你的useEffect未配置依赖数组，会在组件每次重渲染时重复调用play()方法，可能引发动画状态混乱、播放异常的问题。
• 该模型在gltf-viewer中可正常运行，说明模型本身无故障，问题完全来自代码调用逻辑。

修正后代码 #

const group = useRef()
const { nodes, materials, animations } = useGLTF('/scene.gltf')
const { actions, names } = useAnimations(animations, group)

useEffect(() => {
  // 方案1：遍历播放所有动画片段，适配多片段分别存储不同轨道的情况
  names.forEach(name => {
    actions[name]?.reset().play()
  })

  // 方案2：如果确认所有轨道都在同一个动画片段中，可直接指定对应名称播放
  // 可先打印names数组确认目标片段的索引/名称：console.log(names)
  // actions['你的目标动画片段名称']?.reset().play()
}, [actions, names]) // 必须添加依赖数组避免重复执行

可选排查步骤 #

如果修改代码后仍有异常，可打印animations数组查看每个AnimationClip的tracks属性，确认风扇轨道所属的动画片段，直接指定该片段播放即可。

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