一：使用three的前置
1.引入three.js
// 引入three.js
import * as THREE from 'three';
2.引入three.js其他扩展库
除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。
一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
3.学习环境：.html文件中直接引入threejs
如果不是正式开发Web3D项目，只是学习threejs功能，完全没必要用webpack或vite搭建一个开发环境。
学习使用的环境，只要创建一个.html文件，编写threejs代码，最后通过本地静态服务打开.html文件就行。
4.script标签方式引入three.js
你可以像平时开发web前端项目一样，通过script标签把three.js当做一个js库引入你的项目。
three.js库可以在threejs官方文件包下面的build目录获取到。
<script src="./build/three.js"></script>
//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene);
5.ES6 import方式引入
给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js。
<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>
6.type="importmap"配置路径
学习环境中，.html文件引入three.js，最好的方式就是参考threejs官方案例，通过配置
下面配置的type="importmap"代码具体写法不用掌握记忆，复制粘贴后，能修改目录就行，你可以去电子书课件或者课件源码中复制。
<!-- 具体路径配置，根据自己文件目录设置 -->
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js"
}
}
</script>
<!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs -->
<script type="module">
import * as THREE from 'three';
// 浏览器控制台测试，是否引入成功
console.log(THREE.Scene);
</script>
7.type="importmap"配置——扩展库引入
通过配置
配置addons/等价于examples/jsm/。
<script type="importmap">
{
"imports": {
"three": "./three.js/build/three.module.js",
"three/addons/": "./three.js/examples/jsm/"
}
}
</script>
<script type="module">
// three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
// 扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
console.log(OrbitControls);
console.log(GLTFLoader);
</script>
二：完整代码展示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threejs中文网:www.webgl3d.cn</title>
</head>
<body>
<!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js"
}
}
</script>
<script src="./index.js" type="module">
</script>
</body>
</html>
js
// 引入three.js
import * as THREE from 'three';
/**
* 创建3D场景对象Scene
*/
const scene = new THREE.Scene();
/**
* 创建网格模型
*/
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);
//材质对象Material
const material = new THREE.MeshBasicMaterial({
color: 0x0000ff, //设置材质颜色
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
scene.add(mesh); //网格模型添加到场景中
// console.log('三维场景',scene);