一、沒有立體感就來創造

我們認識了 Geometry 和 Material，也成功把原本的紫色方塊變成藍色球體，但仔細看會發現，這顆球雖然是 3D 物件，看起來卻還是沒有立體感。

原因很簡單，需要有光才會看起來有陰影，立體感也會逐漸浮出。

二、換一個 Material

前面使用 MeshBasicMaterial，它不需要光線也可以顯示，所以就算加入 Light，效果也不會有太大的變化。

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

所以這裡我們要改成 MeshStandardMaterial 它會受到光線影響，所以就可以開始看到明暗的差別。

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

三、幫 3D 世界添加一盞燈

const light = new THREE.DirectionalLight(0xffffff, 3);

light.position.set(3, 3, 5);

scene.add(light);

這段程式碼就是將球體增加燈光，第一個 0xffffff 是燈光的顏色，這裡使用白光，後面的 3 則是光線的強度，接著是 light.position.set(3, 3, 5); 就是設定燈光的位置，當光線從不同方向照到球體上，就會開始出現亮面和暗面，最後將這段加進我們的世界裡。

四、結論

打開後發現，球體明顯多了亮面以及暗面，所以到目前為止，我們能夠將物件加入3D世界，而且學會怎麼改物件的形狀跟外觀，尤其今天還學會了增加光。

接下來我們就要學會讓這顆球動起來。