Three.js初学（1）

初学准备

1. 广泛应用

Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

2. 版本问题

正式开始之前需要下载three.js的官方文件包–（提供了许多有用的学习资源）
目前three.js正处于飞速发展的阶段，基本上每几个月都会发布一个新版本，主要就是添加一些新功能或者废弃更名一些老旧API
three.js官方文件所有版本包：https://github.com/mrdoob/three.js/releases
three.js的中文文档：http://www.webgl3d.cn

3. 文件目录

three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
          │
└───docs——Three.js API文档文件
          │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
          │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
          │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
          │───index.html——打开应用程序

4. 引入使用

1.项目开发引入

threejs就是一个js库，直接通过npm命令行安装就行。

// 比如安装148版本
npm install three@0.148.0 --save

执行import * as THREE from 'three';,ES6语法引入three.js核心

除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。
一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。

2. 学习环境引入

• 通过script标签把three.js当做一个js库引入你的项目。

<script src="./build/three.js"></script>

随便输入一个API，测试下是否已经正常引入three.js

console.log(THREE.Scene); 

• 给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js。

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>

• 通过配置<script type="importmap">实现学习环境.html文件和vue或reaact脚手架开发环境一样的写法。

// 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式
<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>

初学案例

入门three.js的第一步首先就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念。

创建3d场景

• 三维场景Scene

三维场景Scene对象其实就是虚拟的3D场景，用于模拟现实生活中的三维场景。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

• 物体形状：几何体Geometry

three.js提供了许多几何体的API，在文档中搜索geometry可以看到众多API具体使用方法。

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 

• 物体外观：材质Material

如果想定义物体的外观特征，比如颜色等，就需要用到材质相关的API来实现。以网格基础材质MeshBasicMaterial为例子。

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 

• 物体：网格模型Mesh

实际生活中有各种各样的物体，在threejs中可以通过网格模型Mesh 表示一个虚拟的物体，比如一个箱子、一台电脑。

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

• 模型位置.position

生活中物体往往都具有位置，你可以通过位置属性来定义网格模型在三维场景Scene的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);

• .add()方法

在三维场景中创建好一个虚拟物体对象Mesh之后，需要通过.add()方法，将网格模型添加到三维场景里边去。

scene.add(mesh); 

透视投影相机

如果想把三维场景渲染到web网页中去，同时还需要一个虚拟摄像机，就如同生活中你想获取一个地方的照片，就需要一台摄像机进行拍照。

• 透视投影相机PerspectiveCamera

threejs提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。这个透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律，它是3D场景的渲染中使用得最普遍的投影模式。

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

• 相机位置.position

虚拟相机的位置不同，所拍出的照片就各不相同，虚拟相机可以通过位置属性来进行位置的调整。

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
camera.position.set(200, 200, 200); 

• 相机观察目标.lookAt()
  你用相机拍照你需要控制相机的拍照目标，具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言，就是设置.lookAt()方法的参数，指定一个3D坐标。

camera.lookAt(mesh.position);//指向mesh对应的位置
camera.lookAt(0, 0, 0); //坐标原点

• 定义相机渲染输出的画布尺寸

生活中相机拍照的照片是有大小的，对于threejs而言一样，需要定义相机在网页上输出的Canvas画布(照片)尺寸，大小可以根据需要定义，这里先随机定义一个尺寸。把threejs虚拟相机渲染三维场景在浏览器网页上呈现的结果称为Canvas画布。

// 定义相机输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度

• 透视投影相机PerspectiveCamera：视锥体

透视投影相机的四个参数 fov, aspect, near, far 构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

参数	含义	默认值
fov	相机视锥体竖直方向视野角度	50
aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height	1
near	相机视锥体近裁截面相对相机距离	0.1
far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向	2000

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

渲染器

现在三维场景和相机已经准备好了，如果想要拍照只需要最后一步，那就是按下相机拍照的按钮，而渲染器就充当这个角色，如果完成“咔”这个拍照动作，就需要一个新的对象，也就是WebGL渲染器WebGLRenderer

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

• 设置Canvas画布尺寸.setSize()

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

• 渲染器渲染方法.render()

执行渲染方法.render()就可以生成一个Canvas画布(照片)，并把三维场景Scene呈现在canvas画布上面,你可以把.render()理解为相机的拍照动作“咔”。

renderer.render(scene, camera); //执行渲染操作

• 渲染器Canvas画布属性.domElement

通过属性.domElement可以获得渲染方法.domElement本质上就是一个HTML元素：Canvas画布。使用该方法将画布插入到页面中任意HTML元素中去即可。

document.body.appendChild(renderer.domElement);

最终效果展示如下：

创作不易╰(°▽°)╯，觉得好玩就点个赞再离开吧~😘