摘要：對于自身不能發(fā)光的物體，需要給場景添加光源從而達到可視的效果。中渲染陰影的開銷比較大，所以默認物體是沒有陰影的，需要多帶帶開啟。主要用于檢測動畫運行時的幀數(shù)，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會影響性能，一般為左右。

WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，它允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型。

但使用WebGL原生的API來寫3D程序非常復(fù)雜，需要相對較多的數(shù)學(xué)知識，對于前端開發(fā)者來說學(xué)習(xí)成本較高。而Three.js對WebGL提供的接口進行了非常好的封裝，簡化了很多細節(jié)，大大降低了學(xué)習(xí)成本，成為前端開發(fā)者完成3D繪圖的得力工具，目前在github上star數(shù)量已經(jīng)達到了將近4萬。

首先來看一個例子，該例子繪制了一個立方體，并讓它不斷旋轉(zhuǎn)，通過這個例子來初步了解three.js的基本使用及主要API。

var scene = new THREE.Scene(); // 創(chuàng)建場景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 創(chuàng)建透視相機
var renderer = new THREE.WebGLRenderer(); // 創(chuàng)建一個 WebGL 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 設(shè)置渲染器為全屏
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1); // 創(chuàng)建一個長寬高都為1個單位的立方體
var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 創(chuàng)建材質(zhì)，對光照無感
var cube = new THREE.Mesh(geometry, material); // 創(chuàng)建一個立方體網(wǎng)格（mesh）,將材質(zhì)包裹在立方體上
scene.add(cube); // 將立方體網(wǎng)格添加到場景中
camera.position.z = 5; // 指定相機位置
function render() {
requestAnimationFrame(render); // 讓瀏覽器執(zhí)行參數(shù)中的函數(shù)，不斷循環(huán)
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera); // 結(jié)合場景和相機進行渲染，即用攝像機拍下此刻的場景
}
render();

three.js中的三大要素：場景（scene）、相機（camera）、渲染器（renderer），有了這三樣?xùn)|西，我們才能夠使用相機將場景渲染到網(wǎng)頁上去。

場景
場景是所有物體的容器，場景只有一種。
創(chuàng)建場景：要構(gòu)件一個場景很簡單，只需要new一個場景對象出來即可：var scene = new THREE.Scene()

相機
相機是成像的工具，相機有很多種類，不同種類的相機即使從一個角度拍攝，所成像出來的結(jié)果也不相同。相機決定了場景中哪個角度的景色會顯示出來。
說到相機，就涉及到坐標系的概念。webGL和three.js使用的是右手坐標系，如下圖所示：

在Three.js中有兩種常用的相機：透視相機（perspectiveCamera）和正交投影相機（OrthographicCamera ）

透視相機：

正交投影相機：

渲染器
渲染器的作用就是將相機拍攝出的畫面在瀏覽器中呈現(xiàn)出來。渲染器決定了渲染的結(jié)果應(yīng)該畫在頁面的什么元素上面，并且以怎樣的方式來繪制。

three.js中有很多種類的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是webGL渲染器。

創(chuàng)建webGL渲染器：var renderer = new THERR.WebGLRenderer();

創(chuàng)建完渲染器后，需要調(diào)用render方法將之前創(chuàng)建好的場景和相機相結(jié)合從而渲染出來，即調(diào)用渲染器的render方法：renderer.render(scene,camera)

以上就是three.js中完成3D繪圖的三大要素，利用這三大要素，我們就可以繪制出想要的3D圖像了。

繪制的前期準備工作已經(jīng)做完，接下來要做的就是把想要繪制的物體添加到場景中了。在計算機世界里，3D世界是由點組成，兩個點能夠組成一條直線，三個不在一條直線上的點就能夠組成一個三角面片，無數(shù)個三角面片就能夠組成各種各樣形狀的物體，通常把這種網(wǎng)格模型叫做Mesh模型。Mesh模型是三維開發(fā)中使用的最為廣泛的模型。

創(chuàng)建Mesh模型的物體：
var object = new THREE.Mesh(Geometry, Material)，第一個參數(shù)代表物體的形狀，第二個參數(shù)代表物體的材質(zhì)。

Geometry
three.js 給出了很多方法去生成固定的網(wǎng)格形狀，比如長方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據(jù)坐標去生成具體形狀的方法，可以借助第三方建模軟件建模之后導(dǎo)入，目前支持的模型格式有.obj（最常用），.mtl，.dae，.ctm，.ply，.stl，.wrl，.vtk等。Three.js有一系列支持外部導(dǎo)入文件的輔助函數(shù)，是在three.js庫之外的，使用前需要額外下載。

Material
hree.js給出了很多種直接生成材質(zhì)的方法，其中比較常用的有MeshBasicMaterial（對光照無感，給幾何體一種簡單的顏色或顯示線框）、MeshLambertMaterial（對光照有反應(yīng)，無光源則不會顯示，用于創(chuàng)建暗淡的不發(fā)光的物體）、MeshPhongMaterial（對光照有反應(yīng)，無光源則不會顯示，用于創(chuàng)建金屬類明亮的物體）等等。

物體之所以能被人眼看見，一種是它自身的材料就能發(fā)光，不需要借助外界光源；另一種是自身材料不發(fā)光，需要反射環(huán)境中的光。對于自身不能發(fā)光的物體，需要給場景添加光源從而達到可視的效果。

Light
three.js中可以創(chuàng)建出很多不同類型的光源，比如環(huán)境光（AmbientLight，它的顏色會添加到整個場景和所有對象的當前顏色上），點光源（PointLight，這種光源放出的光線來自同一點，且方向輻射自四面八方，例如蠟燭發(fā)出的關(guān)），方向光（THREE.DirectionalLight，也稱無限光，從這種光源發(fā)出的光線可以看作是平行的，例如太陽光），聚光燈（THREE.SpotLight ，這種光源的光線從一個錐體中射出，在被照射的物體上產(chǎn)生聚光的效果，例如手電筒發(fā)出的光等）

有光源就缺少不了陰影，在Three.js中，能形成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight；而相對地，能表現(xiàn)陰影效果的材質(zhì)只有THREE.LambertMaterial與THREE.PhongMaterial。three.js中渲染陰影的開銷比較大，所以默認物體是沒有陰影的，需要多帶帶開啟。開啟陰影方法：

將渲染器的shadowMapEnabled屬性設(shè)置為true（告訴渲染器可以渲染隱形)

將物體及光源的castShadow屬性設(shè)置為true（告訴物體及光源可以透射陰影)

將接收該陰影的物體的receiveShadow屬性設(shè)置為true（告訴物體可以接收其他物體的陰影）

data.GUI
data.GUI 是一個輕量級的圖形用戶界面庫（GUI 組件），使用這個庫可以很容易地創(chuàng)建出能夠改變代碼變量的界面組件，從而實現(xiàn)一些實時交互效果。

stats.js
stats.js 主要用于檢測動畫運行時的幀數(shù)，可以顯示fps（表示每秒多少幀）和 ms（每幀多少毫秒），fps越大越好，但太大會影響性能，一般為60左右。

https://threejs.org/ three.js官方網(wǎng)站

http://www.hewebgl.com/ WebGL中文網(wǎng)

http://techbrood.com/threejs/... three.js 中文文檔