Threejs 是什么
官网对 Threejs 的介绍非常简单：“Javascript 3D library”。openGL 是一个跨平台3D/2D的绘图标准，WebGL 则是openGL 在浏览器上的一个实现。web前端开发人员可以直接用WebGL 接口进行编程，但 WebGL 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。Threejs 对 WebGL 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。
Threejs 应用场景举例
1. web 3D游戏
2. 3D模型展示
3. 数据可视化
4. web vr
Threejs 的基本要素
基本要素包括以下几个方面：场景、相机、光和物体
场景：是一个三维空间，所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。
相机：Threejs必须要往场景中添加一个相机，相机用来确定位置、方向、角度，相机看到的内容就是我们最总在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向和角度。
光：假如没有光，摄像机看不到任何东西，因此需要往场景添加光源，为了跟真实世界更加接近，Threejs支持模拟不同光源，展现不同光照效果，有点光源、平行光、聚光灯、环境光等。
物体：有了场景、相机、光，就可以往场景中放物体了，在Threejs中，物体由形状和材质两部分组成，形状决定物品的轮廓，材质则是物体的材料和质感。
渲染
Threejs绘制的东西，最终需要在屏幕一块矩形画布上展示出来，为了实现动画效果，我们需要有一个重绘机制。由于视神经元的反应速度问题，图像消失后仍会在人眼残留1/24秒，只要一秒内绘制的帧数超过24就能实现流畅的动画效果。Threejs提供了重绘接口，我们有两种方式去调用接口重绘。一种是setInterval,以固定的时间间隔去调用，可以用于我们对渲染帧数要求比较高的场景，但事实上由于JavaScript是单线程的，这种方式并不能100%保证相同的时间间隔调用，如果浏览器繁忙可能会导致setInterval的延迟执行。第二种方式是requestAnimationFrame，让浏览器自行根据当前CPU负载等情况决定何时重绘，达到最佳帧率。
位置
为了方便描述位置，引入了坐标系，Threejs使用的是右手坐标系，坐标系的原点位于渲染画布的几何中心，我们对物体的位置描述也是指物体的几何中心的位置。
相机
相机有正交投影相机和透视投影相机两种。透视投影跟人眼看到的世界是一样的，近大远小；正交投影则远近都是一样的大小，三维空间中平行的线，投影到二维空间也一定是平行的。大部分场景都适合使用透视投影相机，因为跟真实世界的观测效果是一样；在制图、建模等场景适合使用正交投影相机，方便观察模型之间的大小比例。
Threejs中的相机跟真实世界的相机不完全一样，这里相机的可见区域是一个立方体，成为相机的示景体。
正交投影相机：示景体是一个长方体，由6个参数确定，THREE.OrthographicCamera(left，right，top，bottom，near，far)，这6个参数规定了相机示景体的左右上下前后六个面的位置。
透视投影相机：示景体是一个梯形体，由4个参数确定，THREE.PerspectiveCamera(fov，aspect，near，far)。fov是相机在竖直方向的张角，aspect则是宽高比，即width/height，通常设为画布的宽高比，near和far分别是近平面和远平面与相机的距离。
投影大小：考虑一种比较简单的场景，相机示景体的远近平面和坐标系中的xy平面平行，从而示景体远近平面上的内容刚好可以垂直投影到画布上，并且示景体中与xy平面平行的任何一个平面，投影到画布上刚好等于画布大小。假如透视投影相机的近平面的大小为axb，远平面的大小为2ax2b，则一张axb大小的纸放在近平面上，投影到画布时刚好铺满整张画布；放到远平面上则只能占据画布面积的1/4（远平面的面积是近平面的4倍）。正式因为透视投影相机的示景体近小远大，才会导致同样一个物品放在不同位置显示出近大远小的效果。而正交投影相机因为远近平面大小一样，所以同一个物品距离相机的远近不影响在画布上投影展示的大小。
物体
物体由几何形状（Geometry）和材质（Material）组成，同样的几何形状，不同材质构成了不同物体，比如球状有篮球玻璃球水晶球等。
形状：Threejs提供了一些常见的几何形状，有三维的也有二维的，三维的比如长方体、球体等，二维的比如长方形圆形等，如果默认提供的形状不能满足需求，也可以自定义通过定义顶点和顶点之间的连线绘制自定义几何形状，更复杂的模型还可以用建模软件建模后导入。
材质：Threejs提供了集中比较有代表性的材质，常用的用漫反射、镜面反射两种材质，还可以引入外部图片，贴到物体表面，成为纹理贴图。
外部模型：通过3D建模软件构建物体的三维模型并导出模型文件，Threejs导入模型进行使用。
光照
光源主要有以下几种：
-
环境光
所有角度看到的亮度一样，通常用来为整个场景指定一个基础亮度，没有明确光源位置 -
点光源
一个点发出的光源，照到不同物体表面的亮度线性递减 -
平行光
亮度与光源和物体之间的距离无关，只与平行光的角度和物体所在平面有关 -
聚光灯
投射出的是类似圆锥形的光线
