ThreeJS模块化实现：将Three代码从HTML中分离

云上老周

2026-8-7

解决Three.js模块化导入问题

一、修复"Cannot use import statement outside a module"错误

浏览器默认将普通JS文件视为非模块脚本，不支持import语法，解决方法：

在HTML中引入你的JS文件时，添加type="module"属性：
```
<script type="module" src="your-script.js"></script>
```

二、正确导入Three.js

根据使用场景选择对应导入方式：

场景1：使用npm安装的Three.js

如果已通过npm install three安装包，直接在JS文件顶部写：

import * as THREE from 'three';
// 后续正常使用THREE对象，比如
const scene = new THREE.Scene();

场景2：使用本地的three.module.js文件

确保相对路径与HTML文件位置匹配，导入语句改为：

import * as THREE from './build/three.module.js';
// 注意路径开头的./，避免路径解析错误

三、动态import()的正确用法

你之前用let THREE= import("../build/three.module.js")的问题在于，import()是异步函数，返回Promise对象，不能直接赋值。需用以下方式处理：

// 方法1：async/await
async function initThree() {
  const THREE = await import('../build/three.module.js');
  // 所有依赖THREE的代码写在这里
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
}
initThree();

// 方法2：Promise.then
import('../build/three.module.js').then((THREE) => {
  // 在这里编写Three.js代码
  const renderer = new THREE.WebGLRenderer();
  document.body.appendChild(renderer.domElement);
});