加载自定义.glb文件遇404及JSON解析错误求助

问题根源 #

你遇到的Unexpected token '<'错误，是因为useGltf请求模型文件时返回了404的HTML页面，而非预期的GLTF数据——相对路径在Electron+Vite环境下的资源解析规则和普通Web项目不同，导致路径指向错误。

解决步骤 #

1. 调整模型文件位置
   将model.glb移动到项目根目录的public/models/文件夹中（如果public/models不存在，手动创建这两级目录）。Vite+Electron会把public目录作为静态资源根目录，打包和运行时都会正确识别这里的文件。

2. 修正组件中的资源路径
   修改组件里useGltf的路径为绝对路径，替换原来的相对路径：

   // 原代码
   const gltf = useGltf('./models/model.glb')
   // 修改后
   const gltf = useGltf('/models/model.glb')
   

3. 验证路径正确性
   启动项目后，打开渲染进程的开发者工具（Electron中按F12），切换到Network面板，刷新页面查看model.glb的请求状态：

   • 若请求URL为http://localhost:xxxx/models/model.glb且状态为200，说明路径正确；
   • 若仍为404，检查public目录结构是否正确，确保模型文件确实在public/models/下。

额外说明 #

Threlte的useGltf在Vite环境下，会优先从Vite的静态资源目录（即public）加载文件，使用绝对路径可以避免组件嵌套层级带来的相对路径解析混乱，尤其在Electron这种混合环境下更可靠。

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