React+Three.js加载3D模型报错：JSON解析异常求助

报错原因 #

控制台报错SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON"，本质是请求模型文件时返回的不是GLTF模型的JSON内容，而是HTML页面（比如404页面或项目首页），说明模型文件的路径配置错误，导致加载请求指向了错误的资源。

排查及解决步骤 #

• 确认路径写法：React项目中public目录是静态资源根目录，加载模型必须用根路径开头的写法（以/开头）。比如模型文件放在public/my-model.gltf，加载代码要写：

  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  
  const loader = new GLTFLoader();
  loader.load('/my-model.gltf', (gltf) => {
    scene.add(gltf.scene);
  });
  

  不要用相对路径（比如./my-model.gltf），否则会根据当前组件的路由路径去请求，容易出错。

• 检查文件完整性：确保GLTF模型的所有关联文件（比如.bin二进制文件、纹理图片）都和主模型文件一起放在public目录下，缺失关联文件也可能导致加载异常。

• 核对文件名：检查代码中的文件名和实际文件的名称、大小写完全一致（部分系统/服务器区分文件名大小写），比如代码写的是/MyModel.gltf，实际文件是/mymodel.gltf就会报错。

• 验证请求资源：打开浏览器开发者工具的「网络」面板，找到模型的请求项，查看响应内容。如果响应是HTML，说明路径错误，调整路径直到响应返回GLTF的JSON结构。

内容的提问来源于stack exchange，提问作者Diego Beristain de la Mora