2-3-three.js

為什麼需要 Three.js

由於 WebGL 對於初學者而言仍需要了解它的底層細節、複雜的著色語言（GLSL），所以想要短時間上手 WebGL 是相對困難的，在幾年前的鐵人賽中 Kalan 大大曾寫過關於 WebGL 的介紹，想體驗一下的朋友可以參考他的系列文。

而 Three.js 最大的優點就是它對 WebGL 進行了良好的封裝，大大的降低了前端工程師們的學習成本，可以說 Three.js 蠻像 3D 網頁中的 jQuery。

另外一點就是 Three.js 具備輕量函式庫的特性，相當適合拿來在 Web 做中小型專案，像是小遊戲或品牌網頁等。

要在螢幕上顯示 3D 圖形，在 Three.js 中需要以下的基本元素：

• 場景（Scene）：供其他元素設置的空間。

• 相機（Camera）：在場景中建立觀察點，並確定觀察方向、角度。

• 物體（Objects）：在場景中添加被觀察的物體。

• 光源（Light）：在場景中用來照亮物體的光。

• 渲染器（Renderer）：將所要呈現的場景渲染到畫面上。