Three.js与Cannon.js介绍与使⽤
Three.js 基础概念
使⽤ Three.js 前，⾸先要理解以下⼏个核⼼概念：
Sence 场景
在 Three.js 中⾸先需要创建⼀个三维空间，我们称之为场景。
场景可以想象成是⼀个容器，⾥⾯存放着所有渲染的物体和使⽤的光源。
let scene = new THREE.Scene()
Axes 坐标轴
Three.js 采⽤的是右⼿坐标系，拇指、⾷指、中指分别表⽰ X、Y、Z 轴的⽅向。
Camera 摄像机
摄像机就相当于我们的双眼，决定了能够在场景中的所见所得。
Three.js 中提供以下⼏种摄像机类型，最为常⽤的是 PerspectiveCamera 透视摄像机 ，其他了解下即可。
ArrayCamera 阵列摄像机
⼀个 ArrayCamera 会包含多个⼦摄像机，通过这⼀组⼦摄像机渲染出实际效果，适⽤于 VR 场景。
CubeCamera ⽴⽅摄像机
创建六个 PerspectiveCamera（透视摄像机），适⽤于镜⾯场景。
StereoCamera ⽴体相机
双透视摄像机适⽤于 3D 影⽚、视差效果。
OrthographicCamera 正交摄像机
OrthographicCamera（正交摄像机）定义了⼀个矩形可视区域，物体只有在这个区域内才是可见的，另外物体⽆论距离摄像机是远或事近，物体都会被渲染成⼀个⼤⼩，所以这种摄像机类型适⽤于 2.5D 场景（例如斜 45 度游戏）。
PerspectiveCamera 透视摄像机
最为常⽤的摄像机类型，模拟⼈眼的视觉，根据物体距离摄像机的距离，近⼤远⼩。默认情况下，摄像机的初始位置 X、Y、Z 都为 0，摄像机⽅向是从正 Z 轴向负 Z 轴看去。通过 Near 和 Far 定义最近和最远的可视距离， Fov 定义可视的⾓度。
Mesh ⽹格
有了场景和摄像头就可以看到 3D 场景中的物体，场景中的我们最为常⽤的物体称为⽹格。
⽹格由两部分组成：⼏何体和材质
Geometry ⼏何体
记录了渲染⼀个 3D 物体所需要的基本数据：Face ⾯、Vertex 顶点等信息。
例如下⾯这个⽹格是由三⾓形组成，组成三⾓形的点称为顶点，组成的三⾓形称为⾯。
Material 材质
材质就像是物体的⽪肤，决定了⼏何体的外表。
外表的定义可以让⼀个物体看起来是否有镜⾯⾦属感、暗淡、纯⾊、或是透明与否等效果。
javascript的特性
Light 光源
光源相当于在密闭空间⾥的⼀盏灯，对于场景是必不可少的
在 Three.js 常⽤的有这⼏种光源：
AmbientLight 环境光源
属于基础光源，为场景中的所有物体提供⼀个基础亮度。
DirectionalLight 平⾏光源
效果类似太阳光，发出的光源都是平⾏的。
HemisphereLight 半球光源
只有圆球的半边会发出光源。
PointLight 点光源
⼀个点向四周发出光源，⼀般⽤于灯泡。
SpotLight 聚光灯光源
⼀个圆锥体的灯光。
Shadow 阴影
另外要注意并不是每⼀种光源都能产⽣阴影，⽬前只有三种光源可以：
DirectionalLight 平⾏光源
PointLight 点光源
SpotLight 聚光灯光源
另外如果要开启模型的阴影的话，模型是由多个 Mesh 组成的，只开启⽗的 Mesh 的阴影是不⾏的，还需要遍历⽗ Mesh 下所有的⼦Mesh 为其开启投射阴影 castShadow 和接收投射阴影 receiveShadow 。
// 遍历⼦ Mesh 开启阴影
if (child instanceof THREE.Mesh) {
child.castShadow = true
}
})
glTF 模型格式
前⾯提到 Three.js 引擎⽀持的格式⾮常的多，我们最为常见的格式有 .obj + .mtl + .jpg/.png ，但使⽤这种模型格式存在⼀个问题， .obj 是静态模型，不⽀持动画数据存储，⽆法使⽤模型的动画，所以我建议使⽤ glTF 这种模型格式。
传统的 3D 模型格式的设计理念更多是针对本地离线使⽤，所以这类 3D 模型格式没有针对下载速度或加载速度进⾏优化，⽂件⼤⼩往往会⾮常的⼤，随着 Web 端的兴起，对⽂件⼤⼩更为敏感的今天，我们该尝试别的模型格式了。
glTF 是由 Khronos Group 开发的 3D 模型⽂件格式，该格式的特点是最⼤程度的减少了 3D 模型⽂件的⼤⼩，提⾼了传输、加载以及解析 3D 模型⽂件的效率，并且它可扩展，可互操作。
第⼀版 glTF 1.0 于 2015 年 10 ⽉ 19 ⽇发布，2017 年 6 ⽉ 5 ⽇的 Web 3D 2017 ⼤会发布了最终版本 glTF 2.0。
glTF 模型格式⽂件组成
模型⽂件.gltf
包含场景中节点层次结构、摄像机、⽹格、材质以及动画等描述信息。
⼆进制⽂件.bin
包含⼏何、动画的数据以及其他基于缓冲区的数据， .bin ⽂件可以直接加载到 GPU 的缓冲区中从⽽不需要额外的解析，因此能够⾼效传输和快速加载。
材质贴图⽂件.png/.jpg
3D 模型做凹凸贴图或普通贴图上所使⽤到⽂件。
glTF 模型格式导出
官⽅在 .gltf 格式导出上提供了多种建模软件的导出插件，⽐如有：
3DS Max Exporter
Maya Exporter
Blender glTF 2.0 Exporter
正巧我们常⽤的 C4D 建模软件官⽅没有提供 C4D 的导出插件，所以我们使⽤ C4D 导出后再导⼊ Blender，通过 Blender 作为中转站导出 glTF 格式⽂件。
但由于两个建模软件之间的材质并不能相通，导出后的模型⽂件材质效果表现不佳，这是因为 Blender 有⾃⼰的⼀套材质流程系统，例如有 glTF Metallic Roughness 和 glTF Specular Glossiness ，需在此基础之上重新贴材质后导出解决。
另外注意的⼀点 Blender 的坐标系与 Three.js 是不同的，Blender 会将 Z 和 Y 对调位置，在导出时要选择 Convert Z up to Y up 进⾏对调。