MacOS Catalina Safari环境下Three.js基础示例配置失败求助

核心问题出在模块脚本的作用域隔离上：用type="module"引入或导入的变量，只会在模块内部生效，普通<script>标签无法访问模块里的变量，这就是你反复遇到「找不到THREE」的原因。

下面给两种简单可靠的解决方法，任选其一即可：

方法一：用全局IIFE版本（适合快速跑基础教程代码） #

直接使用Three.js的非模块构建版本，它会自动把THREE挂载到全局window对象上，不需要任何import语句。

本地安装版本 #

<!-- 引入普通非模块版three.js -->
<script src="./node_modules/three/build/three.js"></script>
<script>
  // 直接全局使用THREE
  const scene = new THREE.Scene();
  // 后续教程代码直接写在这里即可
</script>

CDN版本 #

<script src="https://unpkg.com/three@latest/build/three.js"></script>
<script>
  const scene = new THREE.Scene();
  // 业务代码...
</script>

方法二：全模块写法（现代规范方式） #

如果想保持ES模块的写法，需要把所有用到THREE的代码都放在type="module"的脚本里，模块内部的导入变量可以正常使用：

配合importmap简化路径 #

<script type="importmap">
  {
    "imports": {
      "three": "./node_modules/three/build/three.module.js"
    }
  }
</script>
<script type="module">
  // 模块内部导入THREE
  import * as THREE from 'three';
  const scene = new THREE.Scene();
  // 所有业务代码都写在这个模块脚本里
</script>

直接导入路径 #

如果不想用importmap，也可以直接写完整路径：

<script type="module">
  import * as THREE from './node_modules/three/build/three.module.js';
  const scene = new THREE.Scene();
  // 业务代码...
</script>

为什么之前的配置失败？ #

你之前把import放在模块脚本里，然后在普通<script>里调用THREE——普通脚本不属于模块作用域，无法访问模块内部导入的变量，所以必然报错。只要确保所有使用THREE的代码都在模块脚本内，或者用全局IIFE版本，就能解决问题。

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