无法在本地运行three.js的问题求助

数据老陈

2026-7-8

本地部署Three.js独立JS文件运行问题解决方案

先解决核心代码错误

你控制台出现的ReferenceError: Three is not defined错误，完全是因为变量大小写不匹配：

你通过import * as THREE把库导入为全大写的THREE，但实例化场景时却写成了Three.Scene()，JS是大小写敏感的，所以直接报错。

修正后的main.js：

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

// 保持和导入的变量名一致，用全大写THREE
const scene = new THREE.Scene();
console.log(scene);

独立JS文件运行的两个关键要求

script标签必须加type="module"
你的HTML里已经写了<script type="module" src="/main.js"></script>，这没问题，但要注意路径：如果main.js和HTML在同一文件夹，把路径改成./main.js更稳妥，避免根路径匹配问题。
不能直接双击打开HTML文件
本地直接打开HTML用的是file://协议，会触发跨域限制，导致ES模块无法正常导入。你已经装了Node.js，用下面两种方式启动本地服务器：
1. 如果你是用Vite初始化的项目（HTML里有vite.svg），直接在项目根目录跑：
```
npm run dev
```
  然后访问终端给出的本地地址（比如http://localhost:5173）。
2. 用通用的http-server：
  先全局安装：
```
npm install -g http-server
```
  进入项目文件夹后运行：
```
http-server
```
  访问提示的地址即可。