Day 18｜Three.js（1）基礎認識

昨天的 OBJ Demo 則先借用了 Three.js，幫我們把模型放進網頁。接下來幾天就讓我們來認識 Three.js
今天就先不寫程式，先簡單認識這個工具是在幹嘛，明天再開始正式學習吧

Three.js 是什麼？它和 WebGL 有什麼關係？

Three.js 是用來在網頁上建立 3D 圖像的 JavaScript 函式庫，提供場景、相機、幾何形狀、材質、燈光等工具，讓我們可以用類似 3D 建模軟體的方式寫程式。

那麼，已經有 WebGL，為什麼還需要 Three.js？回想前幾天，即使只是畫一個立方體，也要自己準備頂點資料、建立 buffer、編譯 Shader，並把各種矩陣傳進 GPU。

WebGL 提供的是比較底層的繪圖介面。它可以畫出三角形，但不會直接理解我們想要的是「一顆金屬球」或「一台可以環繞觀看的相機」。這些概念，需要我們自己組織成程式。Three.js 把許多常見工作整理好了。例如原本需要計算球體頂點，Three.js 有提供現成的球體幾何工具；原本自己寫光照公式，現在可以先選擇內建材質與燈光，再調整需要的效果。當今天我們製作可以旋轉的商品展示頁時，可以把注意力放在商品模型、表面材質、燈光與相機的配置，再決定使用者如何操作它們。

你可以理解成，WebGL 是汽車的引擎，Three.js 則像是方向盤與煞車、油門。
比起直接操作引擎，使用控制系統更容易更直覺的地駕馭 3D 畫面。

底層仍然由 WebGL 繪製。前面學過的頂點、矩陣與 Shader 依然在運作，只是許多細節交給 Three.js 管理。官方對 Three.js 與 WebGL 的說明

有哪些常見的函式與工具？

Three.js 的 API 很多，今天就先來介紹一些經常會用到的~~

1. 場景與渲染：把畫面組織起來

例如一台車可以由車身和四個輪子組成。將它們放在共同的群組下，移動整台車時，輪子就能跟著移動，不必分別更新每一個零件。

2. 相機：決定從哪裡觀看

前面介紹過的 View 與 Projection 矩陣，在這裡有了對應的相機工具。

3. 幾何與網格：決定物件長什麼樣子

4. 材質、燈光與貼圖：決定表面看起來如何

像是昨天的卡比獸只有單色外形。想讓它出現身體與肚子的配色，就會碰到材質和貼圖；想讓表面有明暗或高光，還要配合材質選擇與光照設定。

貼圖也不只負責顏色。它可以記錄表面的其他資訊，例如哪些地方比較粗糙，或如何改變光照計算使用的法線。

5. 模型載入與互動：讓場景能被操作

以上列的是經常使用到的功能，想查看完整清單與各個工具的詳細用途，可以依名稱查閱 Three.js 官方 API 文件。

那為什麼還需要學 WebGL？

在開發過程中，運行效能也是需要考量的一環。模型的三角形數量、貼圖尺寸，以及光影效果的複雜度，都會影響渲染效能。離開頁面或更換場景內容時，也需要釋放不再使用的資源，避免持續占用記憶體。

WebGL 的基礎概念，在這時就能幫助我們判斷問題。例如看不到模型，可能是相機的位置或方向不對；物體表面看起來異常，則可能與法線、材質或燈光設定有關。了解畫面是如何產生的，在使用 Three.js 這類高階工具時，就能更快掌握問題的方向。