three.js快速入门学习笔记
一·three.js初始化操作
1 · 下载连接
Releases · mrdoob/three.js · GitHub
2、文档链接(中文)
three.js docs
3 、 vscode插件
4 、使用
预览代码3D效果，打开对应的html文件，右键点击Open with Live Server即可。
二、学习环境和开发环境引入js库
1、开发环境
注意：项目开发引入three.js，比如vue或者react脚手架引入three.js
1.1、安装命令
npm install three@0.164.0 -save1.2、引入three.js
import * as THREE from 'three';1.3、引入three.js的扩展库
//引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'1.4、扩展库的位置
注意：很多的扩展库具体几乎都在 examples/jsm里面
2、学习环境
注意：入门three.js阶段，.html文件中直接引入three.js
2.1、ES6 import引入方式
注意：给script标签设置type="module"，就可以通过import的方式进行引入three.js
import * as THREE from 'three';2.2、type="importmap"配置路径
<script type="importmap">{"imports": {"three": "../three.js-r164/build/three.module.js"}}
</script>2.3、全部代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script type="importmap">{"imports": {"three": "../three.js-r164/build/three.module.js"}}</script><script type="module" src="./build/index.js">import * as THREE from 'three';console.log(THREE.Scene);</script>
</body></html>2.4、扩展库的配置
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script type="importmap">{"imports": {"three": "../three.js-r164/build/three.module.js","three/addons/": "../three.js-r164/examples/jsm/"}}</script><script type="module" src="./build/index.js">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js'console.log(THREE.Scene);</script>
</body></html>三、第一个3D案例--创建3D场景
注意：入门three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个概
1、场景Scene
1.1、三维场景Scene
//创建3D场景对象Scene
const scene = new THREE.Scene();1.2、物体形状Geometry
注意：threejs提供了各种几何形状的api，用来表示三维物体的几何形状
//创建一个几何体，长方体 长宽高100
const geometry = new THREE.BoxGeometry(100, 100, 100);1.3、物体外观：材质Material
注意：如果想定义物体的外观效果，比如颜色，就需要通过材质Material相关的API去实现
//创建一个基础网格材质，颜色为红色
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 1.4、物体：网格模型Mesh
实际生活中有各种各样的物体，在threejs中通过网格模型Mesh表示一个虚拟的物体，比如一个箱子，一个鼠标等。
//创建网格模型
const cube = new THREE.Mesh( geometry, material ); 1.5、模型的位置 .position
现实生活中，一个物体往往都是有位置的，对于threejs而言也是有的，可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。
//创建网格模型
const cube = new THREE.Mesh(geometry, material);
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
cube.position.set(0, 10, 0)1.6、.add() 方法
在threejs中创建一个表示物体的虚拟对象Mesh，需要通过.add()方法，把网格模型mesh添加到三维场景scene中
scene.add( cube );2、相机Camera
threejs如果想把三维的场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像生活中想获得一张照片，需要一台相机拍照一样。
创建一个新的Camera（摄像机）。注意：这个类并不是被直接调用的；你所想要的或许是一个 PerspectiveCamera（透视摄像机）或者 OrthographicCamera（正交摄像机）。
2.1、透视投影相机PerspectiveCamera
这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
let width = 500
let height = 500
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
scene.add(camera);2.2、相机位置 .position
生活中用相机拍照，相机的位置不同，拍照结果也不同，threejs中虚拟相机同样如此。
相机对象Camera具有位置属性 .position,通过位置属性 .position可以设置相机的位置。
camera.position.set(200, 200, 200)2.3、相机观察目标 .lookAt()
用相机拍照需要控制相机的拍照目标，两点构成一条直线。具体就像相机看向什么方向。
对于threejs而言，就是设置.lookAt() 方法的参数，指定一个3D坐标。
//看向坐标原点
camera.lookAt(0,0,0)3、渲染器Renderer
threejs中的渲染器就相当于相机按下快门那一下，会得到一张人眼能够看见的图片。
3.1、WebGL渲染器 WebGLRenderer
通过WebGL渲染器WebGLRenderer可以实例化一个WebGL渲染器对象
//创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();3.2、设置canvas画布的尺寸 .setSize()
//定义threejs输出画布的尺寸
renderer.setSize(width, height)3.3、渲染器渲染方法 .render()
渲染器WebGLRenderer执行渲染方法.render()就可以生成一个canvas画布（照片）
renderer.render(scene, camera)3.4、渲染器Canvas画布属性 .domElement
渲染器WebGLRenderer通过属性.domElement可以获得渲染方法.render()生成的canvas画布，.domElement本质上就是一个HTML元素：Canvas画布
document.body.appendChild(renderer.domElement)4、例子显示结果
全部代码：
import * as THREE from 'three';//场景
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 100, 100, 100 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0, 10, 0)
scene.add( cube );//相机
let width = 500
let height = 500
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
camera.position.set(200, 200, 200)
camera.lookAt(0,0,0)
scene.add( camera );//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height)
renderer.render(scene, camera)
document.body.appendChild(renderer.domElement)
运行结果：
四、Threejs三维坐标系加强三维空间的认识
加强threejs三维空间的认识
1、辅助观察坐标系
THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，
//添加辅佐坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);2、材质半透明
设置材质半透明这样可以看见坐标系的原点
const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5
});3、AxesHelper的xyz轴
threejs坐标轴颜色红R，绿G，蓝B分别对应坐标系的x,y,z轴。对于threejs的3D坐标系默认y轴朝上。