3D模型组件在React中加载失败怎么办？

倩倩🍀 提问于 2026-03-08 23:12:21 阅读 14

组件

我在用React集成一个3D模型查看器，用的是three.js，但模型死活加载不出来，控制台也没报错，就是一片黑。我试过调整相机位置和光源，还是不行。

下面是我写的加载GLTF模型的代码，逻辑应该没问题吧？是不是漏了什么关键步骤？

useEffect(() => {
  const loader = new GLTFLoader();
  loader.load('/model.gltf', (gltf) => {
    scene.add(gltf.scene);
    renderer.render(scene, camera);
  });
}, []);

我来解答赞 1 收藏

反馈

1 条解答

ლ志煜 Lv1

哈，这问题我太熟了，当时我也卡在这好几天。你的代码看起来没问题，但three.js这种坑就在于它不报错也不告诉你为啥黑的。建议按这个顺序排查：

第一，确认模型文件路径对不对。webpack/vite打包后路径可能会变，建议用public文件夹或者绝对路径试试：

loader.load(process.env.PUBLIC_URL + '/model.gltf', ...)

第二，加个错误回调看看是不是模型没加载成功：

loader.load(

  '/model.gltf',

  (gltf) => {...},

  undefined,

  (error) => console.error('加载模型失败:', error)

);

第三，检查下你的renderer设置，我遇到过没设置antialias导致黑屏：

const renderer = new WebGLRenderer({ antialias: true });

renderer.setSize(width, height);

还有记得把renderer的dom元素挂载到React组件里，我之前傻逼到忘了这步。

最后再检查下场景里至少要有环境光和方向光，three.js默认没光源。模型材质如果是PBR的必须配好光源才能看见。

2026-03-08 23:13