WebGL是在瀏覽器中實現三維效果的一套規範，而最初使用WebGL原生的API來寫3D程式是一件非常痛苦的事情，在辛苦的付出下WebGL開源框架出現了，其中three.js就是非常優秀的一個，它掩蓋了很多麻煩的細節，那麼，就讓我們一起來看看，什麼是three.js吧！

threejs可以將它理解成three + js，three表示3D的意思，js表示javascript的意思。那麼合起來，three.js就是使用javascript 來寫3D程式的意思。Three.js是一個偉大的開源WebGL庫,WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D。

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。也是世界上最流行的程式語言，這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。Javascript是執行在網頁端的指令碼語言，那麼毫無疑問Three.js也是執行在瀏覽器上的。

如果我們需要使用Threejs來繪圖，只需要建立一個最小繪圖環境即可。Threejs在底層其實還是呼叫html5中的canvas api來實現繪圖的。但和我們一般繪製2D影象不同，Threejs在底層使用的是canvas的webgl context來實現3D繪圖。webgl context本身更多是直接對gpu的操作，用起來相當不直觀，為此Threejs在頂層對3D繪圖所需的各種元素（例如場景，攝影機，燈光，幾何影象，材質等）進行了封裝

threejs三大元件

這三大元件分別是相機（Camera）、渲染器（Renderer）和場景（Scene），這三個元件是建立3D圖形的必備元件。其中：

場景用來容納圖形元素，包含所有需要顯示的3D物體以及其他相關元素的容器。場景相當於宇宙，而圖形元素就是星星，圖形元素只有新增到場景中，其座標、大小等才有意義。攝影機的作用是決定3D場景如何投影到2D畫布之上，定義可視域，確定哪些圖形元素是可見的。渲染器則負責用如何渲染出影象，是使用WegGL還是Canvas，用於最後繪製的畫筆。

原文