在web前端三維可視化上，Three.js是國(guó)內(nèi)應(yīng)用得最為廣泛的三維引擎。Three.js是基于原生WebGL封裝運(yùn)行的三維引擎。
Three.js能做些什么？
⑤WebVR。實(shí)現(xiàn)在線鏈接VR瀏覽；
threejs三大組件
這三大組件分別是相機(jī)（Camera）、渲染器（Renderer）和場(chǎng)景（Scene），這三個(gè)組件是創(chuàng)建3D圖形的必備組件。其中：
-
場(chǎng)景用來容納圖形元素。場(chǎng)景相當(dāng)于宇宙，而圖形元素就是星星，圖形元素只有添加到場(chǎng)景中，其坐標(biāo)、大小等才有意義。
-
相機(jī)的作用是定義可視域，即確定哪些圖形元素是可見的。
-
渲染器則負(fù)責(zé)用如何渲染出圖像，是使用WegGL還是Canvas。
threejs基本圖形元素
所謂基本圖形元素，就是threejs中的圖形顯示，基本與這些對(duì)象相關(guān)。那么，理解了這些對(duì)象，就能知道如何在threejs中表示圖形。threejs的基本圖形元素都定義在Objects下，如下圖：
這些類又可以分成下面4個(gè)小類別：
點(diǎn)、線、面
首先，所有圖形都是由點(diǎn)、線或面構(gòu)成，所以有：
-
Points：點(diǎn)或點(diǎn)云，可以用點(diǎn)或點(diǎn)云表示圖形
-
Line/LineSegments：直線和虛線，可以用線或線團(tuán)表示圖形
-
Mesh：網(wǎng)格模型，可以用若干三角面表示圖形
點(diǎn)、線、面都可以聚集到一起組成一個(gè)立體圖形，也可以單獨(dú)一個(gè)，作為一個(gè)2D圖形，可以看【點(diǎn)云表示圖形】【線團(tuán)表示圖形】【網(wǎng)格模型表示圖形】這幾個(gè)例子來直觀了解。
精靈
Sprite在threejs中定義為“一個(gè)永遠(yuǎn)面向相機(jī)的平面，通常用來加載紋理”，其最重要的特點(diǎn)是永遠(yuǎn)面向相機(jī)，這在某些時(shí)候很有用。要想一睹精靈的風(fēng)采，可以打開【精靈】，注意一下，所有圖形都是面向相機(jī)的。
骨骼
骨骼相當(dāng)于圖形的控制單元，控制骨骼運(yùn)動(dòng)，就能帶動(dòng)骨骼上附著的圖形的運(yùn)動(dòng)。如果你不理解什么是骨骼，可以看看騰訊開發(fā)的一個(gè)骨骼游戲框架【AlloyStick】,按JJKL,看看火柴人的運(yùn)動(dòng)。threejs的骨骼例子則看【這里】。
在threejs中，與骨骼相關(guān)的類有：
-
Bone：骨骼
-
Skeleton：骨架，由多根骨骼組成
-
SkinnedMesh：皮膚，附著在骨骼上的圖形
其它類
-
lensFlare：光暈
-
LOD：細(xì)節(jié)級(jí)別
-
Group:組，可以將多個(gè)對(duì)象打包成一個(gè)組，便可統(tǒng)一操作。
其實(shí)，在Threejs中能看到的東西就是這些了，然后這些東西的組成也有很大的變化，從而演化成一個(gè)變化多端的系統(tǒng)。
幾何形狀和材質(zhì)
threejs使用Geometry定義物體的幾何形狀，其實(shí)Geometry的核心就是點(diǎn)集，之所以有這么多的Geometry，是為了更方便的創(chuàng)建各種形狀的點(diǎn)集。
threejs通過Material定義物體的材質(zhì)。下面是創(chuàng)建一個(gè)圖形的過程的例子：
-
//1、定義形狀 -
let geometry = new THREE.BoxGeometry(10,10,10); -
//2、定義材質(zhì) -
let meshMaterial = new THREE.MeshBasicMaterial({color:0xff0000}); -
let lineMaterial = new THREE.LineBasicMaterial({color:0x934894}); -
let pointMaterial = new THREE.PointMaterial({color:0x738938}); -
-
//3、創(chuàng)建圖形 -
let mesh = new THREE.Mesh(geometry,meshMaterial); //創(chuàng)建一個(gè)用網(wǎng)格模型表示的形狀 -
let line = new THREE.Line(geometry,lineMaterial); //創(chuàng)建一個(gè)用線團(tuán)表示的形狀 -
let point = new THREE.Points(geometry,pointMateril); //創(chuàng)建一個(gè)用點(diǎn)云表示的形狀
看了上面的例子，你應(yīng)該明白，圖形的幾何形狀（Geometry）是與表示方法無關(guān)的，你可以使用點(diǎn)、線或面來表示一個(gè)幾何形狀。
幾何形狀（Geometry）
Geometry其實(shí)就是點(diǎn)的集合，Geometrys分類下放的各種幾何形狀都是各種圖形表示方法通用的：
這些類提供便捷方法來創(chuàng)建代表各種形狀的頂點(diǎn)的集合。
材質(zhì)（Material）
材質(zhì)與圖形的類型是相關(guān)的，點(diǎn)使用PointsMaterial，線使用LineXXXMaterial，網(wǎng)格使用MeshXXXMaterial，精靈使用SpriteMaterial等等。
紋理
紋理是用來表現(xiàn)圖形的一些微小細(xì)節(jié)的。理論上講，一個(gè)圖形所有的細(xì)節(jié)都可以用點(diǎn)線面表示出來，但是這么做需要巨量的點(diǎn)線面，計(jì)算速度十分的慢，所以，在細(xì)節(jié)上，可以使用紋理。
在threejs中使用Texture來表示紋理，紋理可以從圖片中加載，也可以從canvas中加載，所以，紋理能表示的圖像很豐富。