安装/引入 three.js

方式一：cdn 引入

<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script>
  var scene = new THREE.Scene()
  console.log(scene)
</script>

缺点：引入 three.js 的插件比如 OrbitControls 的 cdn（来源：https://www.cdnpkg.com/three-orbitcontrols） 后，会报错 Uncaught ReferenceError: require is not defined at OrbitControls.js:1:48。

原因是 OrbitControls 的 cdn 中引入了 three，但实际上找不到安装的 three，因为这里 three 是通过 cdn 引入的。
目前还没找到解决办法，如果有小伙伴知道了，请在评论区告诉我~

<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script src="https://unpkg.com/three-orbitcontrols@2.110.3/OrbitControls.js"></script>
<script>
  var scene = new THREE.Scene()
  console.log(scene)
</script>

方式二：用本地静态服务 Live Server 打开 htm

注意事项：

一定要用服务器打开，推荐使用插件 Live Server，否则直接把 html 在浏览器打开，会报错，提示跨域：

---

npm i three 后，新建 index.html，书写下述代码：

办法1（推荐）：type="importmap"配置

<!-- 映射目录，即把 `three/addons/` 映射到 `../projects/node_modules/three/examples/jsm/`，注意一定两个地址的末尾都要加 `/`，否则会报错： `Uncaught TypeError: Failed to resolve module specifier "three/addons/controls/OrbitControls.js". Relative references must start with either "/", "./", or "../".` -->
<script type="importmap">
	{
		"imports": {
			"three": "../projects/node_modules/three/build/three.module.js",
        		"three/addons/": "../projects/node_modules/three/examples/jsm/"
		}
	}
</script>

<!-- script 标签中一定要加 `type="module"`，否则报错`Uncaught SyntaxError: Cannot use import statement outside a module` -->
<script type="module">
	import * as THREE from 'three';
	console.log('scene:', THREE.Scene);

	import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
	console.log(OrbitControls);

	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
	console.log(GLTFLoader);

	// 注意版本变化：`three ^0.150.1` 最新版本

	// 旧版本的 THREE.SceneUtils.createMultiMaterialObject 更改为：
	import { createMultiMaterialObject } from 'three/addons/utils/SceneUtils.js'
	// 使用时直接用 createMultiMaterialObject

	// 旧版本的 `new THREE.AxisHelper` 更改为 `new THREE.AxesHelper`
</script>

办法2：ES6 import方式引入three.module.js

  <script type="module">
	// 报错：Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
    // import * as THREE from 'three';

	// 报错： `GET http://127.0.0.1:5500/three net::ERR_ABORTED 404 (Not Found)`
	// import * as THREE from '/three';

	// 正确：
	import * as THREE from './node_modules/three/build/three.module.js';
	var scene = new THREE.Scene()
	console.log(scene)
  </script>

办法3：script标签方式引入three.js

  <script src="./node_modules/three/build/three.js"></script>
  <script>
    // import * as THREE from './node_modules/three/build/three.module.js';
    var scene = new THREE.Scene()
    console.log(scene)
  </script>

方式三：用 vue/react 技术栈

<!-- threeTest.vue -->
<template>
  <div class="3d">3d</div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

export default {
  name: "ThreeDIndex",
  created() {
    console.log(THREE.Scene);
    console.log(OrbitControls);
    console.log(GLTFLoader);
  },
};
</script>

<style lang="scss" scoped></style>

参考链接

1. 网上关于 three.js 的帖子不够精细，推荐一个学习 three.js 的网址：http://webgl3d.cn/pages/cd35b2/
2. THREE.js 学习的时候，用的版本一定要注意

原文地址：https://www.cnblogs.com/shayloyuki/p/17191489.html