使用Parcel在Three.js中导入GLTF模型遇JSON解析错误求助

核心原因 #

你遇到的Unexpected token '<'错误，本质是GLTFLoader请求模型文件时，服务器返回的是HTML页面（大概率是404错误页），而非预期的GLTF JSON数据，导致JSON解析失败，进而出现黑屏。

解决方案 #

1. 修正模型路径

从你的文件路径来看，index.js位于js目录下，而brain.gltf在js/assets目录中。当前代码里的./js/assets/brain.gltf是错误的——相对路径是从index.js所在的js目录出发，正确路径应该是：

loader.load('./assets/brain.gltf', function(gltf) {
  brain = gltf.scene;
  brain.scale.set(2, 2, 2);
  brain.position.y = 4;
  scene.add(brain);
});

2. 让Parcel正确处理静态资源

Parcel对静态资源的处理需要遵循规则：

• 把模型、纹理等静态资源放到项目根目录的public文件夹中（Parcel会自动将public内的文件原封不动复制到打包后的dist目录），此时路径可以写成绝对路径：

  loader.load('/assets/brain.gltf', function(gltf) {
    // ... 你的代码
  });
  

• 若不想用public文件夹，直接在index.js中导入模型，Parcel会自动处理路径：

  import brainModel from './assets/brain.gltf';
  
  loader.load(brainModel, function(gltf) {
    // ... 你的代码
  });
  

3. 移除不必要的Importmap配置

你使用Parcel构建时，不需要手动配置importmap和es-module-shims——Parcel本身支持ES模块，会自动解析import语句并处理依赖。保留这些配置反而可能导致路径混淆，建议移除HTML中的以下代码：

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "three": "../build/three.module.js",
      "three/addons/": "./jsm/"
    }
  }
</script>

直接用标准的import语句即可，Parcel会自动下载并打包Three.js依赖。

4. 添加错误回调排查问题

在模型加载代码中加入错误回调，能更精准定位问题（比如查看HTTP状态码、请求URL）：

loader.load(
  './assets/brain.gltf',
  function(gltf) {
    brain = gltf.scene;
    brain.scale.set(2, 2, 2);
    brain.position.y = 4;
    scene.add(brain);
  },
  undefined, // 进度回调（可选）
  function(error) {
    console.error('模型加载失败:', error);
    console.log('请求的URL:', error.target.responseURL);
  }
);

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