昨天我們將開發環境與 GitHub 備份都設定妥當了。今天的第一步，請在 VS Code 終端機輸入 npm run dev 並開啟本地伺服器。看著 Vite 的預設歡迎畫面，今天的任務就是把它全部拆除，並請出 Three.js 的「三大核心元件」，在網頁上鋪設我們地下城的第一塊地板！

【Step 1：大掃除，清理預設程式碼】

打開 VS Code 左側的檔案總管，我們需要對三個檔案動刀：

1. 將index.html的改成下面的程式碼

<body>
  <canvas id="webgl-canvas"></canvas>
  <script type="module" src="/src/main.js"></script>
</body>

2. 清空 style.css 裡面所有的東西，貼上這三行，確保 3D 畫面能填滿整個網頁，不會出現討厭的捲軸

body {
  margin: 0;
  overflow: hidden;
}

3. 把main.js裡面的程式碼全部刪除，留下一個完全空白的檔案。
   

【Step 2：Three.js 創世三神寶】

在 3D 的世界裡，不管你要渲染多複雜的場景，永遠脫離不了這三個核心元件。請把以下程式碼貼進你剛清空的 main.js：

import './style.css';
import * as THREE from 'three';

// 1. 場景 (Scene) - 我們的地下城舞台
const scene = new THREE.Scene();
scene.background = new THREE.Color('#1a1a2e'); // 設定一個深藍色的神祕背景

// 2. 攝影機 (Camera) - 玩家的眼睛
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};
// 參數依序是：視角(FOV)、長寬比、近裁切面、遠裁切面
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000);
camera.position.set(0, 5, 10); // 把攝影機往上抬、往後拉，才看得到地板
scene.add(camera);

// 3. 渲染器 (Renderer) - 負責把 3D 畫面畫到網頁上的畫家
const canvas = document.querySelector('#webgl-canvas');
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 讓畫面在高解析度螢幕上不模糊

【Step 3：鋪上第一塊 3D 地板】

舞台架好了，如果現在執行，畫面只會是一片深藍色。我們需要放一個東西進去證明它有在運作。在 Three.js 中，物件是由「幾何體 (Geometry)」和「材質 (Material)」組成的網格 (Mesh)。

接著在 main.js 下方加入這段程式碼：

// 建立一塊平面幾何體 (寬 10, 長 10)
const geometry = new THREE.PlaneGeometry(10, 10);
// 建立基礎材質 (目前先用純色，之後會換上 16-bit 像素圖)
const material = new THREE.MeshBasicMaterial({ 
  color: '#4a4e69',
  side: THREE.DoubleSide // 讓平面的正反兩面都看得到
});

// 組合成網格並放入場景
const floor = new THREE.Mesh(geometry, material);
// Three.js 的平面預設是直立的，沿著 X 軸旋轉 -90 度將其平放
floor.rotation.x = -Math.PI / 2; 
scene.add(floor);

【Step 4：讓時間轉動 (渲染迴圈)】

最後，就像遊戲引擎一樣，我們需要一個無限迴圈，讓渲染器以每秒 60 幀的速度不斷更新畫面：

function animate() {
  requestAnimationFrame(animate);
  
  // 讓地板微微旋轉，證明這是一個立體的 3D 空間
  floor.rotation.z += 0.005;

  renderer.render(scene, camera);
}

animate(); // 啟動迴圈

【本日結語】
存檔並切換到瀏覽器，如果你看到一個深藍色背景，且中間有一塊灰紫色的正方形地板正在緩緩旋轉，恭喜你，你已經成功建立了自己的第一個 3D 世界！

今天我們掌握了 Three.js 的「場景、攝影機、渲染器」鐵三角，並了解了模型是由「幾何體 + 材質」構成的。明天，我們要為這個空間裝上「上帝視角控制器 (OrbitControls)」，讓我們可以用滑鼠自由探索這個神祕的地下城雛形，我們 Day 4 見！