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