不使用node.js、express及构建工具时如何正确使用ThreeJS？

浏览器原生ES模块规范不支持from 'three'这类不带路径前缀的裸模块导入符，必须显式指定/、./或../开头的相对/绝对路径，这是你遇到报错的核心原因。以下是可直接在标准静态服务器上运行的解决方案，按优先级排序：

首选方案：使用Import Maps（标准原生方案） #

Import Maps是W3C推出的原生模块导入映射标准，目前Chrome、Firefox、Safari等主流浏览器均已支持，不需要修改任何ThreeJS源码，也不需要构建工具。
操作步骤：

• 在HTML文件的<head>标签内，所有模块脚本之前插入Import Maps配置，示例如下（可根据需求替换为CDN地址或本地路径）：

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
  }
}
</script>

• 后续在你的业务代码中可以直接使用官方推荐的导入写法，不需要修改路径：

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

如果需要全本地部署，只需要把ThreeJS官方发布包下载到本地，保持目录结构不变，修改Import Maps中的地址为本地相对路径即可。

备选兼容方案：全路径导入+手动修改依赖路径 #

如果需要兼容不支持Import Maps的老旧浏览器，可以用这个方案：

• 下载ThreeJS核心模块和所需addon文件到本地项目目录
• 手动修改所有addon文件中的from 'three'语句，替换为ThreeJS核心模块对应的相对路径
• 业务代码中所有导入都使用显式的相对路径：

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

注意事项 #

• 所有使用ES模块的script标签必须添加type="module"属性
• 必须通过静态服务器访问HTML文件，不能直接双击打开本地文件，本地开发可以使用VS Code的Live Server等轻量静态服务工具，不需要Node.js后端逻辑。

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