如何让three.js在本地浏览器正常显示？解决模块解析错误

错误根源 #

你写的/Users/16103/Desktop/three这种本地绝对路径，浏览器根本认不了：

• 浏览器的ES模块导入规则要求，相对路径必须以./、../开头，或者用规范的模块标识符（比如npm包名，但得靠打包工具或CDN支持）
• 直接用file://协议打开本地文件时，浏览器会限制文件系统的跨域访问，这种绝对路径也没法被正确解析

具体解决办法 #

方法1：用相对路径+本地HTTP服务器（最推荐的本地开发方式） #

1. 先理清楚你的项目文件结构，比如改成这样：

   你的项目文件夹/
   ├─ index.html
   ├─ js/
   │  └─ main.js （你的JS代码文件）
   └─ lib/
      └─ three.module.js （从Three.js官网下载的ES模块版本文件）
   

2. 修改main.js里的导入语句为相对路径，对应你的文件位置：

   import * as THREE from '../lib/three.module.js'
   

3. 启动本地HTTP服务器，比如用Python（大部分电脑自带）：
   • 打开终端，进入你的项目文件夹
   • 执行命令：python -m http.server 8000（Python3）或者python -m SimpleHTTPServer 8000（Python2）
4. 打开浏览器访问http://localhost:8000，别再直接双击打开index.html了

方法2：直接用CDN导入（最简单的临时方案） #

不想下载本地文件的话，直接用CDN的Three.js模块链接替换你的导入语句：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js'

（版本号可以换成你需要的Three.js版本）
这种方式不用搭服务器，直接打开index.html就能跑，但得联网

方法3：用打包工具（适合后续复杂项目） #

如果以后项目功能变多，推荐用Vite、Webpack这类工具：

1. 终端里进入项目文件夹，初始化npm项目：npm init -y
2. 安装Three.js：npm install three
3. 导入语句直接写：import * as THREE from 'three'
4. 跟着打包工具的文档构建运行就行，它会自动处理模块解析的问题

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