three.js的基础概念介绍

首先我们需要理解场景Scene、相机Camera、渲染器Renderer三个基本概念。

场景Scene

三维场景Scene对象可以理解为虚拟的3D场景，用来模拟实际生活中的三维空间：

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

相机Camera

正如我们观测现实世界需要眼睛一样，在three.js中要观测到三维场景scene的内容，还需要借助一个观测工具：虚拟相机Camera。
three.js提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera，下面我们介绍一下透视投影相机。

透视投影相机PerspectiveCamera

透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。

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

生活中用相机拍照，你相机位置不同，拍照结果也不同，three.js中虚拟相机同样如此。

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

除了相机的位置之外，你还可以设置相机镜头对准的坐标：

1
2
//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(cube.position);//指向cube(实际物体)对应的位置

生活中相机拍照的照片是有大小的，对于three.js而言一样，需要定义相机在网页上输出的尺寸

透视投影相机PerspectiveCamera: 视锥体

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

1
2
3
4
5
6
7
// 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);

// PerspectiveCamera( fov, aspect, near, far )

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

渲染器Renderer

第一个3D案例

接下来我们就可以创建一个三维物体了；在这里一个三维物体被抽象成了两个属性：形状和材质。

形状Geometry

Three.js提供了各种各样的几何体API，用来表示三维物体的几何形状。

1
2
// 创建一个立方体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)

材质Material

如果你想定义物体的外观效果，比如颜色，就需要通过材质Material相关的API实现。

1
2
// 创建一个材质对象
const material = new THREE.MeshBasicMaterial({color: 0xff0000})

网格模型Mesh

最后我们使用网格模型Mesh通过Geometry和Material来创建一个红色的立方体：

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

// 将模型添加到三维空间中：
scene.add(cube);