一、方塊怎麼出現的

前面兩天，我們成功做出一個3D方塊，而且也認識了Scene、Carema、Readerer，但現在問題來了，為什麼它是方塊 ? 又為什麼是紫色 ? 我們怎麼讓物件變成這樣 ?
在一般的HTML以及CSS狀況下，我們只需要給予它邊框大小還有圓弧度就可以改變型態，在這裡我們需要用到 Geometry、Material。

Geometry → 決定形狀
Material → 決定外觀

二、Geometry：決定物件的形狀

BoxGeometry 是讓物件變為任一形狀，之前是用正方形做示範，所以長寬高都要一樣長度，這樣顯現出來就會是方形。

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

既然可以變成正方形，那也可以變成其他形狀，這裡讓它變成於圓形看看:

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

SphereGeometry 是 Three.js 中用來建立三維球體形狀的基礎幾何體。

三、Material：決定物件的外觀

這裡類似設定CSS樣式的是 Material，它可以設定物件的外觀，這裡改變了它的顏色為紫色。

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

那這樣為了讓大家知道如何修正，讓這個圓形物件變為藍色。

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

要另外提醒，Material的顏色設定比較特別，有三種使用方法:

1. 以16進位數字，使用 0x 前綴，例如:0xff0000
2. 以16進位字串，使用前要將色瑪轉成字串，例如:"#ff0000"
3. 透過 Color 物件與方法修改顏色(不常使用)，
   例如: material3.color.set(0xff0000);

四、組合起來

有了 Geometry 和 Material，最後再使用 Mesh 將「形狀」+「外觀」合併在一起，這樣就得到一個完整的3D物件啦。

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

五、結論

這次打開網頁，就會發現原本的紫色方塊變成了藍色球體，現在我們已經可以決定 3D 物件的形狀和顏色了，不過可能會認為這不就是圓形的物件嗎?看起來跟2D還是差不多，而且也看不出真正的立體感。

下一篇，就來幫我們的 3D 世界加上光線。