一、Three.js 是什么
先附上文档：
中文文档：中文文档
Three.js 是一个让用户通过 javascript 入手进入搭建 WebGL 项目的类库。众所周知学习 WebGL 需要图形学知识，而 webgl 需要通过 js 和 glsl 两种语言，会大大增加前端开发者的学习难度。
因此，Three.js 是我们一个快速上手的工具，对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大，用户不需要详细地学习 WebGL，就能轻松创作出三维图形，是前端开发者研发3D绘图的主要工具。
二、概念介绍
1、WebGL
WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 <canvas>元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。
目前支持 WebGL 的浏览器有：
- Firefox 4+
- Google Chrome 9+
- Opera 12+
- Safari 5.1+
- Internet Explorer 11+
- Microsoft Edge build 10240+
然而，WebGL 一些特性也需要用户的硬件设备支持。
WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过WebGL2RenderingContext界面提供的。
<canvas> 元素也被 Canvas API 用于在网页上进行 2D 图形处理。
2、OpenGL
OpenGL是开放式图像库，是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。
3、Canvas
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
三、OpenGL、WebGL、Canvas、Three.js 四者关系
- OpenGL：3D绘图标准
- WebGL：OpenGL + JavaScript
- Canvas：WebGL + Canvas 2D
- Three.js：一个基于WebGL封装的库
四、Three.js 基础入门
入门 Three.js 的第一步，就是认识场景 Scene 、相机 Camera 、渲染器 Renderer 三个基本概念。
1、场景（Scene）
场景是一个三维空间，是存放所有物品的容器，用来表示模拟生活中的真实三维场景，或者说三维世界。可以把场景想象成一个空房间，房间里面可以放置要呈现的物体、相机、光源等。
// 创建3D场景对象Scene
const scene = new THREE.Scene();
2、相机 （Camera）
在场景中需要添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向、角度。
就像你生活中想获得一张照片，需要一台用来拍照的相机。
常用的相机有：
- 透视投影相机（perspectiveCamera）
- 正交投影相机（OrthographicCamera ）
这里只介绍一下透视投影相机（perspectiveCamera）（重要!!）
透视投影相机 PerspectiveCamera 本质上就是在模拟人眼观察这个世界的规律，近大远小。
// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();
透视投影相机的四个参数 fov, aspect, near, far 构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在 Canvas 画布上。
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = window.innerWidth; //宽度
const height = window.innerHeight; //高度
// 50:视场角度, width / height:Canvas画布宽高比, 0.1:近裁截面, 1000：远裁截面
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
PerspectiveCamera 参数介绍：
PerspectiveCamera( fov, aspect, near, far )
| 参数 | 含义 | 默认值 |
|---|---|---|
| fov | 相机视锥体竖直方向视野角度 | 50 |
| aspect | 相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height | 1 |
| near | 相机视锥体近裁截面相对相机距离 | 0.1 |
| far | 相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向 | 2000 |
3、渲染器 （Renderer）
通过WebGL渲染器 WebGLRenderer 可以实例化一个WebGL渲染器对象。
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
设置Canvas画布尺寸 .setSize()
// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
渲染器渲染方法 .render()
渲染器 WebGLRenderer 执行渲染方法 .render() 就可以生成一个Canvas画布(照片)，并把三维场景Scene呈现在canvas画布上面,你可以把 .render() 理解为相机的拍照动作“咔”。
renderer.render(scene, camera); //执行渲染操作
渲染器Canvas画布属性 .domElement
渲染器 WebGLRenderer 通过属性 .domElement 可以获得渲染方法 .render() 生成的Canvas画布，.domElement 本质上就是一个HTML元素：Canvas画布。
document.body.appendChild(renderer.domElement);
Three.js 初试——基础概念介绍完了，后面在慢慢学习新知识，作为入门者，加油！