Three.js 是一款 webGL（3D绘图标准，在此不赘述）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。（官网：https://threejs.org/）
二、 为什么要选择Three.js？
Three.js 作为原生 web3D 引擎，对插件式 web3D 引擎的优势不言而喻：不需要安装插件、在移动端支持好。
Three.js 与其他原生 web3D 引擎对比：
Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。和 Three.js 相比，three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。
PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。
SceneJS：一个开源的 JavaScript 3D 引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。
CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。
相对这些 web3D 引擎，Three.js 的还有以下几点优势：
开发和维护比较活跃；
文档齐全，案例丰富，易于学习；
设计灵活、方便拓展以及增加新的特性；
我们可以根据自己的需要去选择web3D引擎。
三、 开始Three.js
1、 引导
在开始我们的第一个 3D 程序之前，我们需要了解 Three.js 的一些基础，以下是 Three.js 制作 3D 的五要素：
1、渲染器（render）
我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。
2、场景（scene）
相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。
3、照相机（camera）
相当于眼睛，我们想要看到物体，就需要眼睛去看。
4、光源（light）
物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。
5、物体（object）
我们想要表现的内容，会有形状和材质属性。
了解了五要素之后，就可以开始写我们的代码了。
2、 创建渲染器
首先，我们创建一个渲染器。创建渲染器有两种方式：
a. 在 html 上写出 canvas 元素
<canvas ></canvas> 然后创建渲染器时绑定此元素 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(“#000”); // 设置渲染器背景为黑色
b. html 上不创建 canvas 元素，而是使用普通的元素作为容器
<div ></div> 然后创建渲染器，放入容器中 var canvasContainer = document.getElementById('mainCanvas'); var width = canvasContainer.clientWidth; //获取画布的宽 var height = canvasContainer.clientHeight; //获取画布的高 var renderer = new THREE.WebGLRenderer({ antialias: true //抗锯齿开 }); renderer.setSize(width, height); //设置渲染器的宽和高 renderer.setClearColor(0x000000); //设置渲染器的背景颜色为黑色 var canvas = renderer.domElement; //获取渲染器的画布元素 canvasContainer.appendChild(canvas); //将画布写入html元素中
这样，我们的渲染器就创建成功了。创建渲染器时，还可以设置多个属性，比如抗锯齿、透明度等等，详见 three.js 官方文档。
3、 创建场景
渲染器创建之后，我们再创建场景，准备将我们需要绘制的东西放入场景。
var scene = new THREE.Scene();
4、 创建照相机
照相机常用的有两种，一种叫正投影相机：
THREE.OrthographicCamera( left, right, top, bottom, near, far )；
下图为该照相机的视野：
一种叫做透视照相机：
THREE.PerspectiveCamera( fov, aspect, near, far ) ;
下图为该照相机的视野：
下图为两个照相机展示效果的对比：
**左边为正投照相机，远近大小都一样；右边为透视照相机，远小近大，更接近于人眼观察物体的感觉。**
在此以正投照相举例：