导入Three.js与GLTFLoader时模块解析错误求助

这个问题的核心是GLTFLoader内部使用了裸模块标识符import * as THREE from 'three'，而浏览器无法直接解析这种格式的模块导入，必须使用相对/绝对路径或通过导入映射指定模块位置。以下是几种可行的解决方法：

方法1：使用Import Maps（推荐） #

在HTML文件中添加一个importmap脚本，将three映射到本地的three模块路径，这样GLTFLoader内部的导入会自动指向正确的文件：

<script type="importmap">
{
  "imports": {
    "three": "./node_modules/three/build/three.module.js"
  }
}
</script>

之后你的导入代码可以简化为：

import * as THREE from 'three';
import { GLTF, GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';

方法2：修改GLTFLoader的内部导入路径 #

直接编辑./node_modules/three/examples/jsm/loaders/GLTFLoader.js文件，将顶部的导入语句：

import * as THREE from 'three';

替换为相对路径：

import * as THREE from '../../../build/three.module.js';

这种方法简单直接，但注意如果后续更新three包，修改会被覆盖。

方法3：使用CDN导入模块 #

直接使用CDN提供的three和GLTFLoader模块，避免本地路径解析问题：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';
import { GLTF, GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/loaders/GLTFLoader.js';

这种方法无需配置本地依赖，适合快速测试或小型项目。

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