Vite+React-Three-Fiber加载GLTF/GLB模型失败求助

问题描述 #

使用Vite结合@react-three/fiber、@react-three/drei等依赖开发项目时，加载GLTF模型报错：

Uncaught Error: Could not load ./desktop_pc/scene.gltf: THREE.GLTFLoader: Failed to load buffer "scene.bin"

尝试转为GLB格式无效，且Internet Download Manager（IDM）会将scene.bin当作下载文件，页面黑屏。

解决方案 #

1. 规范Vite静态资源路径 #

Vite仅默认处理public文件夹下的静态资源，若模型文件夹不在此目录，会导致.bin文件无法被正确解析：

• 将desktop_pc文件夹整体移到项目根目录的public文件夹下
• 修改代码中的模型路径（注意开头的斜杠代表public根目录）：

  const computer = useGLTF("/desktop_pc/scene.glb");
  

2. 阻止IDM拦截.bin资源 #

IDM会自动拦截二进制文件下载，导致GLTFLoader无法获取资源：

• 打开IDM，进入选项→文件类型
• 在不捕获下列文件类型中添加.bin，或临时关闭IDM后重新测试页面

3. 重新导出无外部依赖的GLB模型 #

若转格式时未正确嵌入资源，仍会存在外部.bin引用：

• 用Blender打开原始GLTF模型，选择文件→导出→glTF 2.0
• 导出设置中勾选嵌入资源，确保所有缓冲区、纹理都打包进GLB单文件
• 用新导出的GLB文件替换原有文件

4. 配置Vite的MIME类型（可选） #

若Vite对.bin文件的MIME类型识别错误，可在vite.config.js中添加配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    mimeTypes: {
      'application/octet-stream': ['bin'],
    },
  },
});

5. 验证模型文件完整性 #

确认desktop_pc文件夹中的scene.glb（或scene.gltf）和scene.bin无损坏，可通过本地GLTF Viewer工具打开模型，检查是否能正常加载。

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