求助：导入three.js模块报错，无法解析模块说明符“three”

问题原因 #

浏览器原生ES模块仅支持相对路径（./、../）或绝对路径（/），无法直接解析npm包名（如'three'），因此会抛出Failed to resolve module specifier错误。

具体解决方案 #

方案1：使用CDN直接导入（快速解决） #

修改script.js中的导入语句，替换为Three.js官方ES模块的CDN地址：

import * as THREE from 'https://unpkg.com/three@latest/build/three.module.js';

注：可指定具体版本号（如three@0.160.0），避免版本变动引发兼容性问题。

方案2：使用本地npm包的相对路径 #

若已通过npm install three安装模块，需使用本地文件的相对路径导入：

// 假设script.js与node_modules处于同一目录
import * as THREE from './node_modules/three/build/three.module.js';

⚠️ 注意：本地直接打开HTML文件会触发跨域限制，必须通过本地服务器运行（如VSCode的Live Server插件、npx serve命令）。

方案3：用打包工具处理（适合生产项目） #

如果是正式项目，推荐使用Vite、Webpack这类打包工具，它们可自动解析npm包名：

1. 初始化项目并安装依赖：

npm init -y
npm install three

2. 以Vite为例启动项目：

npm install -D vite
npx vite

此时import * as THREE from 'three';语句可正常工作，打包后工具会自动处理模块路径。

内容的提问来源于stack exchange，提问作者GT-20