DAY 6 我們學會了 3D 座標。
也學會了：

position → 位置
rotation → 旋轉
scale → 大小

今天我們來了解 Three.js 裡建立 3D 物件最重要的三個東西：

Geometry
Material
Mesh

這三個概念之後也會一直使用。

一、今天完成目標

今天我們會完成：

• 認識 Geometry、Material、Mesh。
• 建立不同的幾何形狀，使用不同材質。
• 將 Geometry 和 Material 組合成 Mesh。
• 今天就沒有程式碼了，可以拿之前的範例去套用今天學的東西。

二、Geometry 是什麼？

Geometry 可以理解成 3D 物件的形狀。
例如立方體：

const geometry = new THREE.BoxGeometry(
    2,
    2,
    2
);

就是建立一個立方體。
Three.js 還有很多不同的 Geometry：

BoxGeometry → 立方體
SphereGeometry → 球體
ConeGeometry → 圓錐
CylinderGeometry → 圓柱
TorusGeometry → 圓環

而我們之後製作太陽系時：

太陽 → SphereGeometry
地球 → SphereGeometry
月球 → SphereGeometry
土星 → SphereGeometry + RingGeometry (二維環形)
...

所以今天開始，我們就不只是做立方體了。

三、Material 是什麼？

Material 可以理解成 3D 物件的外觀。
例如：

const material = new THREE.MeshBasicMaterial({
    color: 0x0088ff
});

代表使用藍色材質。

Geometry 決定「長什麼形狀」
Material 決定「看起來是什麼樣子」

四、Mesh 是什麼？

Mesh 就是之前說過的把 Geometry + Material 組合起來。
例如：

const cube = new THREE.Mesh(
    geometry,
    material
);

最後才真正得到可以放進 Scene 的 3D 物件。
就使我們的 Mesh（網格） = Geometry（幾何體） + Material（材質）。

五、建立不同的 Geometry

Three.js 可以建立很多形狀。

例如：

立方體

const geometry = new THREE.BoxGeometry(
    2,
    2,
    2
);

球體

const geometry = new THREE.SphereGeometry(
    1.5,      //半徑
    32,       //水平分段
    32        //垂直分段
);

分段越多，球體通常看起來越平滑。

圓柱

const geometry = new THREE.CylinderGeometry(
    1,
    1,
    2,
    32
);

圓錐

const geometry = new THREE.ConeGeometry(
    1.5,
    3,
    32
);

不同的 Geometry 就可以製作不同的 3D 形狀。

六、今天小結

今天我們正式認識 Three.js 建立 3D 物件的基本方式。
最重要的公式 Mesh（網格） = Geometry（幾何體） + Material（材質）。
其中：

• Geometry = 形狀
• Material = 外觀
  Mesh = 完整 3D 物件

今天也第一次使用 THREE.SphereGeometry 把立方體換成了球體。

Day 8 預告

「3D 座標與空間：安排行星的位置」
下一天會把目前學到的，真正拿來安排多個 3D 物件。
我們會開始讓不同的球體出現在不同的位置，為之後建立「太陽 → 行星 → 軌道」做準備。