切换Three.js版本触发Uncaught TypeError错误，求解决方案

问题根源 #

从Three.js 0.120+版本开始，官方examples/jsm目录下的模块（比如GLTFLoader）内部导入核心库时，不再使用相对路径，而是改用了裸模块说明符"three"。但浏览器原生ES模块环境不支持解析这类裸说明符——它只能识别以/、./或../开头的相对/绝对路径，这就是你切换版本后出现TypeError的直接原因。

旧版本（如0.118.0）的JSM模块内部是用相对路径导入Three.js核心的，所以直接用CDN URL导入就能正常运行。

解决方案 #

方案1：使用Import Maps（推荐，无需构建工具） #

在HTML中添加importmap脚本，把裸模块说明符映射到对应的CDN路径，让浏览器能正确解析：

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.148.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.148.0/examples/jsm/"
    }
  }
</script>
<script type="module">
  // 现在可以直接用裸说明符导入核心库和插件
  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

  // 你的Three.js业务代码...
</script>

方案2：使用构建工具（适合复杂项目） #

如果你的项目是工程化结构，改用Vite、Webpack等构建工具：

• 安装对应版本的Three.js依赖：npm install three@0.148.0
• 直接按官方文档方式导入模块，构建工具会自动处理裸说明符的解析和打包：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

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