three.js 簡介

1、WebGL 與 three.js

WebGL（Web Graphics Library）是一種3D繪圖協議，它容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型。

但使用WebGL原生的API來寫3D程序很是複雜，須要相對較多的數學知識，對於前端開發者來講學習成本較高。而Three.js對WebGL提供的接口進行了很是好的封裝，簡化了不少細節，大大下降了學習成本，成爲前端開發者完成3D繪圖的得力工具，目前在github上star數量已經達到了將近4萬。

2、three.js

首先來看一個例子，該例子繪製了一個立方體，並讓它不斷旋轉，經過這個例子來初步瞭解three.js的基本使用及主要API。

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

three.js中的三大要素：場景（scene）、相機（camera）、渲染器（renderer），有了這三樣東西，咱們纔可以使用相機將場景渲染到網頁上去。

1. 場景
   場景是全部物體的容器，場景只有一種。
   建立場景：要構件一個場景很簡單，只須要new一個場景對象出來便可：var scene = new THREE.Scene()

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

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

   透視相機：
   

   正交投影相機：

   參數	介紹
   fov	表示視場，即攝像機能看到的視野。推薦默認值50
   aspect	指定渲染結果橫向尺寸和縱向尺寸的比值，推薦默認值爲窗口的長寬比，即window.innerWidth/window.innerHeight
   near	指定從距離攝像機多近的位置開始渲染，推薦默認值0.1
   far	指定攝像機從它所在的位置最遠能看到多遠，過小場景中的遠處不會被渲染，太大會浪費資源影響性能，推薦默認值1000

3. 渲染器
   渲染器的做用就是將相機拍攝出的畫面在瀏覽器中呈現出來。渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，而且以怎樣的方式來繪製。

   three.js中有不少種類的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，一般使用的是webGL渲染器。

   建立webGL渲染器：var renderer = new THERR.WebGLRenderer();

   建立完渲染器後，須要調用render方法將以前建立好的場景和相機相結合從而渲染出來，即調用渲染器的render方法：renderer.render(scene,camera)

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

繪製的前期準備工做已經作完，接下來要作的就是把想要繪製的物體添加到場景中了。在計算機世界裏，3D世界是由點組成，兩個點可以組成一條直線，三個不在一條直線上的點就可以組成一個三角面片，無數個三角面片就可以組成各類各樣形狀的物體，一般把這種網格模型叫作Mesh模型。Mesh模型是三維開發中使用的最爲普遍的模型。

建立Mesh模型的物體：
var object = new THREE.Mesh(Geometry, Material)，第一個參數表明物體的形狀，第二個參數表明物體的材質。

Geometry
three.js 給出了不少方法去生成固定的網格形狀，好比長方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據座標去生成具體形狀的方法，能夠藉助第三方建模軟件建模以後導入，目前支持的模型格式有.obj（最經常使用），.mtl，.dae，.ctm，.ply，.stl，.wrl，.vtk等。Three.js有一系列支持外部導入文件的輔助函數，是在three.js庫以外的，使用前須要額外下載。

Material
hree.js給出了不少種直接生成材質的方法，其中比較經常使用的有MeshBasicMaterial（對光照無感，給幾何體一種簡單的顏色或顯示線框）、MeshLambertMaterial（對光照有反應，無光源則不會顯示，用於建立暗淡的不發光的物體）、MeshPhongMaterial（對光照有反應，無光源則不會顯示，用於建立金屬類明亮的物體）等等。

物體之因此能被人眼看見，一種是它自身的材料就能發光，不須要藉助外界光源；另外一種是自身材料不發光，須要反射環境中的光。對於自身不能發光的物體，須要給場景添加光源從而達到可視的效果。

Light
three.js中能夠建立出不少不一樣類型的光源，好比環境光（AmbientLight，它的顏色會添加到整個場景和全部對象的當前顏色上），點光源（PointLight，這種光源放出的光線來自同一點，且方向輻射自四面八方，例如蠟燭發出的關），方向光（THREE.DirectionalLight，也稱無限光，從這種光源發出的光線能夠看做是平行的，例如太陽光），聚光燈（THREE.SpotLight ，這種光源的光線從一個錐體中射出，在被照射的物體上產生聚光的效果，例如手電筒發出的光等）

有光源就缺乏不了陰影，在Three.js中，能造成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight；而相對地，能表現陰影效果的材質只有THREE.LambertMaterial與THREE.PhongMaterial。three.js中渲染陰影的開銷比較大，因此默認物體是沒有陰影的，須要單獨開啓。開啓陰影方法：

• 將渲染器的shadowMapEnabled屬性設置爲true（告訴渲染器能夠渲染隱形)
• 將物體及光源的castShadow屬性設置爲true（告訴物體及光源能夠透射陰影)
• 將接收該陰影的物體的receiveShadow屬性設置爲true（告訴物體能夠接收其餘物體的陰影）

3、實用的小插件

1. data.GUI
   data.GUI 是一個輕量級的圖形用戶界面庫（GUI 組件），使用這個庫能夠很容易地建立出可以改變代碼變量的界面組件，從而實現一些實時交互效果。
2. stats.js
   stats.js 主要用於檢測動畫運行時的幀數，能夠顯示fps（表示每秒多少幀）和 ms（每幀多少毫秒），fps越大越好，但太大會影響性能，通常爲60左右。

4、參考文檔

1. https://threejs.org/ three.js官方網站
2. http://www.hewebgl.com/ WebGL中文網
3. http://techbrood.com/threejs/... three.js 中文文檔