使用react three fiber加载FBX动画失败：模型显纹理无动画且报错

常见问题及修复步骤 #

1. 修正动画加载与播放逻辑 #

从代码截图来看，你可能没有正确提取和调用FBX中的动画剪辑，按以下方式调整：

• 先确认安装全依赖：npm install @react-three/fiber @react-three/drei three three-stdlib
• 使用useAnimations提取动画，再触发播放：

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

function AnimatedModel() {
  const fbxModel = useFBX('/your-model-path.fbx')
  // 从模型中提取动画动作
  const { actions } = useAnimations(fbxModel.animations, fbxModel)

  useEffect(() => {
    // 替换成你FBX里实际的动画名称，比如"Walk"、"Idle"
    if (actions['YourAnimationName']) {
      actions['YourAnimationName'].play()
    } else {
      console.log('可用动画列表：', Object.keys(actions))
    }
  }, [actions])

  return <primitive object={fbxModel} />
}

2. 针对错误提示的核心修复 #

从错误截图推测是动画引用或加载相关的问题，对应解决：

• 导出FBX时务必勾选包含动画选项，有些建模软件默认不导出动画
• 打印actions查看所有可用动画名，避免拼写错误导致找不到对应动画
• 确保动画在模型加载完成后再执行，通过useEffect依赖actions保证时机正确

3. 其他排查点 #

• 检查FBX文件的骨骼结构是否完整，导出时不要遗漏骨骼绑定信息
• 确认three与@react-three/drei版本匹配，版本差异可能导致API不兼容
• 如果是多动画场景，不要直接调用通用play()，需指定具体的动画动作

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