本地主机运行Three.js及模块失败求助

本地运行解决方案 #

1. 修正模块导入路径与规范 #

官方下载的Three.js包中，three.js并非ES模块入口，正确的模块文件是three.js-master/build/three.module.js；同时OrbitControls的ES模块版本位于jsm目录下，而非examples根目录。修改导入语句：

// 修正Three.js核心模块导入
import * as THREE from './three.js-master/build/three.module.js';
// 修正OrbitControls导入
import { OrbitControls } from './three.js-master/examples/jsm/controls/OrbitControls.js';

2. 移除冗余的脚本引入 #

HTML中无需单独引入three.js，因为Main.js已通过模块导入核心库，删除以下冗余代码：

<script src = "three.js" type="module"></script>

仅保留Main.js的模块引入即可。

3. 必须通过本地HTTP服务器运行 #

直接打开本地HTML文件会触发浏览器的跨域限制（CORS），导致模块加载失败。需启动本地服务器：

• Node.js方案：全局安装http-server（npm install -g http-server），项目根目录执行http-server，访问控制台输出的本地地址（如http://localhost:8080）
• Python方案：Python3执行python -m http.server，Python2执行python -m SimpleHTTPServer，访问对应本地地址

4. 核对文件结构 #

确保文件结构与导入路径匹配：

项目根目录
├── three.js-master/
│   ├── build/
│   │   └── three.module.js
│   └── examples/
│       └── jsm/
│           └── controls/
│               └── OrbitControls.js
├── Main.js
├── index.html
└── style.css

5. 验证运行 #

完成上述修改后，启动本地服务器，打开页面即可看到旋转的绿色立方体，OrbitControls也可正常交互。

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