Three.js无法导入GLTFLoader，VS Code无法输入导入语句求助

先确认Three.js安装逻辑 #

• GLTFLoader是Three.js官方附带的扩展加载器，不需要单独安装。如果你单独装了GLTFLoader包，反而可能导致路径冲突，直接卸载它：npm uninstall gltfloader，确保只保留three核心包。执行npm list three检查版本，建议升级到最新稳定版：npm install three@latest。

修复VS Code的导入提示问题 #

• 在项目根目录创建jsconfig.json（JS项目）或tsconfig.json（TS项目），配置模块解析规则，让VS Code能识别Three.js的模块路径：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "ES6",
    "baseUrl": "./"
  },
  "include": ["**/*.js"]
}

• 保存配置后重启VS Code，重新打开项目，此时导入语句应该能正常补全。

正确的导入写法 #

• 如果你用ES模块（HTML中JS标签需加type="module"），标准导入代码：

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

• 若用CDN引入Three.js，无需写import，直接在HTML中额外引入GLTFLoader的CDN链接，之后用全局THREE.GLTFLoader即可：

<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/loaders/GLTFLoader.js"></script>

检查运行环境配置 #

• 确保你的HTML文件中，引入JS的script标签必须包含type="module"，否则浏览器不支持ES模块导入：

<script type="module" src="./your-main-script.js"></script>

兜底方案：清理依赖重装 #

• 若以上步骤无效，删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install，确保依赖安装完整无损坏。

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