如何在Three.js Fiber中运行Blender导出的多段模型动画？

先确认核心依赖与初始化步骤 #

首先得用对useAnimations钩子——这是drei库专门处理GLTF动画的工具，别直接瞎调用actions：

1. 导入钩子：

import { useAnimations } from '@react-three/drei'

2. 在组件里正确关联动画与模型场景：

const { gltf, animations } = useGLTF('/你的模型路径.glb')
const { actions } = useAnimations(animations, gltf.scene)

这里第二个参数必须传gltf.scene，不然actions找不到要驱动的对象。

排查动画调用的常见问题 #

1. 动画名称不匹配

别想当然用Blender里的名字，先打印出来确认实际键名：

useEffect(() => {
  console.log('可用动画列表：', Object.keys(actions))
}, [actions])

比如Blender里叫"跑步动画"，导出后可能保留原名或变成"跑步_动画"，大小写也必须完全一致，差一个字母都不行。

2. 过早调用play导致报错

useEffect要加actions作为依赖项，并且加判断确保actions初始化完成：

useEffect(() => {
  // 替换成你要播放的动画名，比如"Idle"
  if (actions.Idle) {
    actions.Idle.play()
    // 默认可能只播一次，需要循环的话设置：
    actions.Idle.loop = THREE.LoopRepeat
  }
}, [actions])

不加依赖的话，组件渲染时actions还没加载，自然会报undefined错误。

3. Blender导出时的坑

• 导出GLTF时，必须在动画选项里勾选"All Actions"或你需要的单个动作，不然动画根本没导出。
• 检查Blender里的NLA轨道，确保把动作拖到轨道上，没拖的话导出后不会有动画。

完整示例代码 #

import { useGLTF } from '@react-three/drei'
import { useAnimations } from '@react-three/drei'
import { useEffect } from 'react'
import * as THREE from 'three'

export default function YourModel() {
  const { gltf, animations } = useGLTF('/your-model.glb')
  const { actions } = useAnimations(animations, gltf.scene)

  useEffect(() => {
    console.log('可用动画：', Object.keys(actions))
    // 替换成你实际的动画名称
    const targetAnim = actions['你的动画名称']
    if (targetAnim) {
      targetAnim.play()
      targetAnim.loop = THREE.LoopRepeat
      targetAnim.clampWhenFinished = false // 防止动画停在最后一帧
    }
  }, [actions])

  return <primitive object={gltf.scene} />
}

useGLTF.preload('/your-model.glb')

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