Vite+Three.js项目部署后GLTF模型加载失败求助

1. 检查资源路径大小写 #

线上服务器（Linux环境）严格区分文件名大小写，本地Windows/macOS通常不敏感。打开你的GLTF文件（用文本编辑器即可），核对里面引用的scene.bin、textures/M_Monitor_normal.png等路径，和public目录里实际的文件名、文件夹名完全一致，包括大小写。比如实际文件是m_monitor_normal.png，GLTF里的路径也要同步改成小写。

2. 修正public目录资源的引用路径 #

放在public/img里的资源，加载时必须用根路径开头的绝对路径，示例代码：

loader.load('/img/scene.gltf', function (gltf) {
  scene.add(gltf.scene);
});

不要用./img/scene.gltf这类相对路径，部署后页面路由可能变化，相对路径会指向错误位置。

3. 调整GLTF内部的资源引用路径 #

打开GLTF文件，把里面的buffer和纹理路径改成基于public根目录的绝对路径，比如把：

"uri": "scene.bin"

修改为：

"uri": "/img/scene.bin"

纹理路径同理，将"uri": "textures/M_Monitor_normal.png"改为"uri": "/img/textures/M_Monitor_normal.png"（前提是纹理放在public/img/textures目录下）。

另一种更稳妥的方式：把GLTF模型、bin文件、所有纹理放在同一个目录（比如public/model），GLTF里用相对路径引用，部署后相对位置不变，就能正常加载。

4. 优化模型加载速度 #

3-5分钟的延迟大概率是模型/纹理体积过大导致：

• 用glTF-Pipeline压缩模型：执行npx gltf-pipeline -i scene.gltf -o scene-compressed.gltf -d（启用Draco压缩），压缩后体积会大幅减小
• 压缩纹理图片：用TinyPNG等工具压缩PNG纹理，降低文件大小
• 配置部署平台缓存策略：在Netlify/Vercel的设置里，给静态资源设置合理的缓存过期时间，避免重复加载

5. 检查部署平台的静态资源配置 #

如果是单页应用，需要配置路由 fallback，确保所有路径都指向index.html：

• Netlify：在public目录创建_redirects文件，内容为/* /index.html 200
• Vercel：在项目根目录创建vercel.json，内容为：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

避免因路由问题导致静态资源404。

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