一、今天完成目標

今天我們會完成：

• 再次認識 X、Y、Z 座標
• 建立多個 3D 球體
• 使用 position 設定不同位置
• 讓不同物件出現在 3D 空間
• 初步模擬「太陽與行星」的位置關係

二、今天直接建立「迷你太陽系」

今天我們不再只建立一個球體。
我們建立：

☀️ Sun
🔵 Planet 1
🟢 Planet 2
🔴 Planet 3

先用簡單顏色代表不同天體。
之後再慢慢加入真正的行星材質。

三、完整程式碼

index.html

與 Day 6 相同，不需要修改。

css/style.css

與 Day 6 相同，不需要修改。

js/main.js

// 載入 Three.js
import * as THREE from
    "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";


// ======================
// 1. 建立 Scene
// ======================

const scene = new THREE.Scene();


// ======================
// 2. 建立 Camera
// ======================

const camera = new THREE.PerspectiveCamera(
    75,
    800 / 500,
    0.1,
    1000
);

camera.position.z = 12;


// ======================
// 3. 建立 Renderer
// ======================

const renderer = new THREE.WebGLRenderer();

renderer.setSize(
    800,
    500
);

document
    .getElementById("scene")
    .appendChild(renderer.domElement);


// ======================
// 4. 建立太陽
// ======================

const sunGeometry =
    new THREE.SphereGeometry(
        1.5,
        32,
        32
    );

const sunMaterial =
    new THREE.MeshBasicMaterial({
        color: 0xffaa00
    });

const sun =
    new THREE.Mesh(
        sunGeometry,
        sunMaterial
    );

sun.position.set(
    0,
    0,
    0
);

scene.add(sun);


// ======================
// 5. 建立第一顆行星
// ======================

const planet1Geometry =
    new THREE.SphereGeometry(
        0.5,
        32,
        32
    );

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

const planet1 =
    new THREE.Mesh(
        planet1Geometry,
        planet1Material
    );

planet1.position.set(
    3,
    0,
    0
);

scene.add(planet1);


// ======================
// 6. 建立第二顆行星
// ======================

const planet2Geometry =
    new THREE.SphereGeometry(
        0.7,
        32,
        32
    );

const planet2Material =
    new THREE.MeshBasicMaterial({
        color: 0x44cc88
    });

const planet2 =
    new THREE.Mesh(
        planet2Geometry,
        planet2Material
    );

planet2.position.set(
    -4,
    1,
    0
);

scene.add(planet2);


// ======================
// 7. 建立第三顆行星
// ======================

const planet3Geometry =
    new THREE.SphereGeometry(
        0.6,
        32,
        32
    );

const planet3Material =
    new THREE.MeshBasicMaterial({
        color: 0xff4444
    });

const planet3 =
    new THREE.Mesh(
        planet3Geometry,
        planet3Material
    );

planet3.position.set(
    0,
    -3,
    0
);

scene.add(planet3);


// ======================
// 8. 動畫
// ======================

function animate() {

    requestAnimationFrame(animate);


    // 太陽自轉
    sun.rotation.y += 0.005;


    // 行星自轉
    planet1.rotation.y += 0.01;

    planet2.rotation.y += 0.01;

    planet3.rotation.y += 0.01;


    // 渲染
    renderer.render(
        scene,
        camera
    );
}


// 開始動畫
animate();

四、程式碼簡單說明

1. 太陽放在中心

sun.position.set(
    0,
    0,
    0
);

所以太陽位於：

X = 0
Y = 0
Z = 0

我們把它當作整個場景的中心。

2. 第一顆行星

planet1.position.set(
    3,
    0,
    0
);

代表：

X = 3
Y = 0
Z = 0

所以它會出現在太陽的右側。

3. 第二顆行星

planet2.position.set(
    -4,
    1,
    0
);

這次同時改變：

X = -4
Y = 1

因此它會出現在太陽的左上方。

4. 第三顆行星

planet3.position.set(
    0,
    -3,
    0
);

這次：

X = 0
Y = -3

所以會出現在太陽下方。

五、真正理解 Z

我想 X，Y 大家應該能理解 所以我們針對 Z 來講解
目前三顆行星的 Z 都是 Z = 0 所以主要是在同一個平面上。
但如果改成 Z = 3 行星就會離開原本的平面。
這就是 3D 和 2D 最大的差別之一。
我們來實際測試 Z 軸
你可以把：

planet1.position.set(
    3,
    0,
    0
);

改成：

planet1.position.set(
    3,
    0,
    3
);

你會發現行星的位置改變。
再改成：

planet1.position.set(
    3,
    0,
    -3
);

又會跑到另一個方向。
這就是 Z 軸 → 前後方向

六、今天的小練習

可以自己修改：

planet1.position.set(
    3,
    0,
    0
);

變成：

planet1.position.set(
    5,
    2,
    1
);

觀察它的位置變化。

planet2.position.set(
    -4,
    1,
    0
);

也可以改成：

planet2.position.set(
    -2,
    3,
    -2
);

這樣就可以開始熟悉 3D 空間。

七、今天小結

今天我們第一次把多個 3D 物件放進同一個世界。
並且使用：

object.position.set(
    x,
    y,
    z
);

控制物件的位置。
並且今天的成果：

雖然還不是完整的太陽系，但已經開始有「太陽系」的雛形。
接下來我們就可以開始處理真正重要的事情就是讓行星繞著太陽運動。

Day 9 預告

「Day 9 - 打造全螢幕 3D 太陽系舞台」
下一天開始正式製作太陽。
我們會讓太陽不只是「一顆黃色球體」，而是開始為後面做準備。