2026 iThome 鐵人賽

DAY 5

Modern Web

從 Web 到宇宙：Three.js × WebGL 互動式太陽系與光影實作系列第 5 篇

Day 5 - Three.js：正式建立第一個 3D 世界

17th鐵人賽

Andygong

團隊nutc imac

2026-09-19 11:59:13

51 瀏覽

分享至

今天終於要進入這次 30 天專案的核心之一：Three.js。
Three.js 是建立在 WebGL 上的 JavaScript 3D 函式庫，可以幫我們簡化很多 WebGL 的複雜操作，所以今天先不做太陽系。
我們先完成一件最重要的事情，讓瀏覽器成功出現第一個 3D 物件。

一. 今天完成目標

今天我們會完成：

引入 Three.js
建立 3D 場景
建立相機
建立 WebGL Renderer
建立第一個 3D 立方體
讓立方體旋轉

二. 完整程式碼

index.html

<!DOCTYPE html>
<html lang="zh-TW">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>從 Web 到宇宙</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="container">

        <h1>從 Web 到宇宙</h1>

        <p>DAY 5｜Three.js</p>

        <div id="scene"></div>

    </div>

    <!-- 載入自己的 JavaScript -->
    <script
        type="module"
        src="js/main.js"
    ></script>

</body>

</html>

css/style.css

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #050816;
    color: white;

    font-family: Arial, sans-serif;
    text-align: center;
}

.container {
    padding: 40px;
}

h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

p {
    color: #aaaaaa;
    font-size: 18px;
}

#scene {
    margin-top: 20px;
}

js/main.js

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


// ======================
// 1. 建立場景
// ======================

const scene = new THREE.Scene();


// ======================
// 2. 建立相機
// ======================

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

camera.position.z = 5;


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

const renderer = new THREE.WebGLRenderer();

renderer.setSize(
    800,
    500
);


// 將 Canvas 放進網頁
document
    .getElementById("scene")
    .appendChild(renderer.domElement);


// ======================
// 4. 建立立方體
// ======================

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


// ======================
// 5. 建立材質
// ======================

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


// ======================
// 6. 建立 3D 物件
// ======================

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


// 將立方體加入場景
scene.add(cube);


// ======================
// 7. 動畫
// ======================

function animate() {

    // 下一幀繼續執行
    requestAnimationFrame(animate);


    // X 軸旋轉
    cube.rotation.x += 0.01;


    // Y 軸旋轉
    cube.rotation.y += 0.01;


    // 重新渲染畫面
    renderer.render(
        scene,
        camera
    );
}


// 開始動畫
animate();

三、程式碼簡單說明

載入 Three.js

首先在 JavaScript 內加入：

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

並且 HTML 加入：

<script
    type="module"
    src="js/main.js"
></script>

這是現在 Three.js 官方文件所推薦的模組化載入方式。

建立 Scene

const scene = new THREE.Scene();

Scene 可以想成我們的 3D 世界，之後太陽、地球、月球、其他行星都會放進這個 Scene。

建立 Camera

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

Camera 就是我們觀看 3D 世界的眼睛。
接著：

camera.position.z = 5;

讓相機往後退一點，才能看到立方體。

建立 Renderer

const renderer = new THREE.WebGLRenderer();

Renderer 負責把 Scene + Camera 真正畫到瀏覽器上，接著設定畫面大小：

renderer.setSize(
    800,
    500
);

然後把 Three.js 建立的 Canvas 放進：

<div id="scene"></div>

建立立方體

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

從上往下依序是寬度(X)，高度(Y)，深度(Z)，BoxGeometry 就是立方體的幾何形狀。

建立藍色材質

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

這裡設定：0x0088ff 就是藍色。

Geometry + Material

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

可以先記住：Mesh（網格） = Geometry（幾何體） + Material（材質）。

小補充:
網格 Mesh：代表場景中一個真正看得見、有位置的 3D 物體。
幾何體 Geometry：決定物體的形狀（點、線、面、骨架等）。
材質 Material：決定物体的外觀（顏色、紋理、反光、透明度等）。

把立方體加入 Scene

scene.add(cube);

如果沒有這行，立方體雖然建立了，但不會出現在我們的 3D 世界裡。

讓立方體旋轉

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

每一幀都增加旋轉角度。

requestAnimationFrame(animate);

上面這行會不斷呼叫 animate()。
所以就會變成：畫面 -> 旋轉 -> 重新繪製 -> 旋轉 -> 重新繪製 -> ... 。
Three.js 官方的第一個 3D 範例也是使用動畫迴圈讓立方體持續旋轉。

今天完成後應該看到：

而上面的藍色正方體會持續地轉動。

四、今天小結

今天終於正式進入 3D 世界。
我們所建構的 Three.js 基本架構如下：

Scene (場景)
│
└── Cube (Mesh 物件)
├── Geometry (幾何形狀: BoxGeometry)
└── Material (外觀材質: MeshBasicMaterial)

Camera (相機: PerspectiveCamera)
Renderer (渲染器: WebGLRenderer)

今天的立方體只是開始。
接下來我們會把這些概念拆開來理解，然後開始一步一步把太陽系做出來。