React网站中使用Three.js加载.gltf文件失败求助

核心问题 #

你使用了本地绝对路径C:/Users/jaime/Desktop/NFS-site/public/FSFenix_Render.gltf，React开发服务器无法识别该路径，返回了404对应的HTML页面，进而导致JSON解析失败。

具体修复步骤 #

• 修正资源路径
  将useGLTF的参数改为相对于public文件夹的根路径，public是React项目默认的静态资源目录，直接用斜杠开头的路径即可：

  const { nodes, materials } = useGLTF('/FSFenix_Render.gltf')
  

  若模型放在public的子文件夹（比如public/models），路径则写成/models/FSFenix_Render.gltf。

• 确认文件完整性
  确保.gltf文件关联的纹理、.bin文件等依赖资源，和主文件放在同一目录下，避免因依赖缺失引发间接错误。

• 验证资源可访问性
  在浏览器地址栏直接访问http://localhost:3000/FSFenix_Render.gltf（替换为你的开发服务器端口），如果能看到GLTF的JSON内容，说明路径配置正确；若仍返回HTML，检查文件是否确实在public目录下，以及文件名是否存在拼写错误。

• 不要将GLTF放在src目录
  src目录的资源需要通过import引入，而useGLTF是直接发起HTTP请求获取静态资源，放在public目录才是正确做法。

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