Three.js – 開發環境與基本設置

主題：建立基本場景（Scene）

---

簡介

在使用 Three.js 建立 3D 網頁應用時，Scene（場景） 是所有物件、光源、相機與渲染設定的容器。沒有正確建立與配置 Scene，後續的模型、動畫、互動都無法正確呈現。對於剛踏入 Three.js 的新手而言，了解「場景」的概念與建立方式，等同於學會在畫布上鋪設「舞台」——所有演出都在此上演。

本篇文章將從 基本概念、實作範例、常見陷阱、最佳實踐，一步步帶你完成一個最簡單的 Three.js 場景，並說明它在真實專案中的應用。即使你只會一點 HTML、JavaScript，也能在閱讀完本文後，立即在瀏覽器中看到立體的立方體旋轉。

---

核心概念

1. Scene 的角色與結構

• 容器：Scene 像一個空的盒子，所有要顯示的物件（Mesh、Line、Sprite 等）必須先加入它。
• 座標系統：Three.js 使用右手座標系，x 向右、y 向上、z 向螢幕外。所有物件的座標都是相對於 Scene 原點（0,0,0）而言。
• 層級管理：Scene 允許子 Scene（即 THREE.Group）的嵌套，方便一次性控制一組物件的變形或可見性。

小技巧：在大型專案中，建議以「功能模組」方式建立多個 Group，最後再一次性加入主 Scene，這樣可以減少渲染時的搜尋成本。

2. 建立最小化的 Three.js 場景

以下程式碼示範從頭到尾建立一個只包含 Scene、Camera、Renderer 的最小範例，並在其中加入一個簡單的立方體。

// 1. 取得容器 (HTML 中的 <div id="canvas-container"></div>)
const container = document.getElementById('canvas-container');

// 2. 建立 Scene
const scene = new THREE.Scene();               // <-- 這裡是核心

// 3. 建立相機 (PerspectiveCamera)
const camera = new THREE.PerspectiveCamera(
  75,                                          // 視野角度 (FOV)
  window.innerWidth / window.innerHeight,     // 長寬比
  0.1,                                         // 最近可見距離
  1000                                         // 最遠可見距離
);
camera.position.z = 5;                         // 把相機往 Z 軸移動，讓物件可見

// 4. 建立渲染器 (WebGLRenderer)
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);    // 把 Canvas 加到頁面

// 5. 建立一個簡單的 Mesh（立方體）並加入 Scene
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);                               // <-- 把物件放入 Scene

// 6. 渲染迴圈
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;                     // 讓立方體持續旋轉
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

說明：

• THREE.Scene() 只是一個空容器，真正看到的畫面來自於相機與渲染器的配合。
• renderer.render(scene, camera) 每次呼叫時，會把 Scene 中的所有可見物件，以 Camera 的視角畫到 Canvas 上。

3. 常見的 Scene 設定

設定項目	用途	範例
background	設定場景背景色或貼圖	scene.background = new THREE.Color(0x202020);
fog	加入霧化效果，提升遠距離深度感	scene.fog = new THREE.Fog(0x202020, 10, 50);
overrideMaterial	全局覆寫材質（除錯或快速渲染）	scene.overrideMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});

4. 多場景渲染（進階）

有時候會需要在同一個 Canvas 中渲染 兩個以上的 Scene（例如前景 UI 與後景 3D 世界分開渲染）。基本步驟如下：

// 兩個 Scene
const sceneWorld = new THREE.Scene();   // 主 3D 世界
const sceneUI    = new THREE.Scene();   // UI 層

// 相同的相機與渲染器
const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 渲染順序：先渲染 UI（透明度較高），再渲染世界
function renderAll() {
  // 清除深度緩衝，保證 UI 不受世界深度影響
  renderer.clear();
  renderer.render(sceneWorld, camera);
  renderer.clearDepth();                 // <‑‑ 重要
  renderer.render(sceneUI, camera);
}

實務提示：在多場景情境下，renderer.autoClear 預設為 true，會在每次渲染前自動清除畫面。若要自行控制清除流程，請先把它設為 false。

5. 動態調整 Scene 大小（響應式）

現代網頁必須支援視窗尺寸變化。只要在 resize 事件中同步調整 相機比例 與 渲染器尺寸 即可。

window.addEventListener('resize', () => {
  const width  = window.innerWidth;
  const height = window.innerHeight;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();   // 讓相機重新計算投影矩陣

  renderer.setSize(width, height);
});

---

常見陷阱與最佳實踐

陷阱	說明	最佳做法
忘記加入物件到 Scene	建立 Mesh 後未呼叫 scene.add(mesh)，渲染時看不到任何東西。	每新增一個可視物件，都檢查是否已加入 Scene。
相機位置錯誤	相機與物件同點或在背後，導致畫面全黑。	先把相機拉遠（如 camera.position.z = 5），再根據需求調整。
未設定 Canvas 大小	renderer.setSize 忽略視窗尺寸，導致畫面被裁切或比例失真。	在初始化與 resize 事件中都呼叫 setSize，並同步更新相機比例。
渲染循環忘記 requestAnimationFrame	使用 setInterval 會造成卡頓與不自然的幀率。	永遠使用 requestAnimationFrame，讓瀏覽器自行最佳化。
多場景渲染未清除深度緩衝	UI 層會被世界層的深度遮蔽。	渲染 UI 前呼叫 renderer.clearDepth()，或將 UI 放在獨立的渲染器。

最佳實踐：

1. 模組化：將 Scene、Camera、Renderer 各自封裝成獨立的 class 或 function，提升可維護性。
2. 統一資源管理：使用 THREE.LoadingManager 統一管理貼圖、模型的載入，確保所有資源在渲染前已就緒。
3. 效能監控：加入 stats.js 或 Chrome DevTools 的 Performance 面板，觀察每秒幀數（FPS）與渲染時間。
4. 使用 Scene 的 add / remove 方法：動態增減物件時，務必使用這兩個 API，避免記憶體洩漏。

---

實際應用場景

應用領域	為何需要建立 Scene	範例說明
產品展示	需要在同一畫面中擺放多個模型、光源與環境貼圖	建立主場景放置產品模型，子場景放置環境光與背景天空盒
資料視覺化	3D 直條圖、散點圖等需要座標系統與多層次的圖形	使用 THREE.Group 把每個資料點包成子 Scene，便於批次操作
互動遊戲	角色、地形、特效等皆是 Scene 中的子物件	依照關卡切換不同的 Scene，或在同一 Scene 中切換不同的 Group
AR/VR	虛擬與真實世界的混合需要多層渲染	先渲染實體相機畫面作為背景，再渲染 Three.js Scene 作為前景

---

總結

• Scene 是 Three.js 的核心容器，所有 3D 內容必須先加入它才能被渲染。
• 建立最小化場景只需要三個步驟：new THREE.Scene()、new THREE.PerspectiveCamera()、new THREE.WebGLRenderer()，再把需要的 Mesh 加入即可。
• 常見的陷阱包括忘記加入物件、相機位置不當、未同步視窗尺寸等，透過 最佳實踐（模組化、資源管理、效能監控）可以有效避免。
• 無論是產品展示、資料視覺化、遊戲開發或 AR/VR，正確的 Scene 設計都是成功的基礎。

掌握了 Scene 的概念與操作後，你就能在 Three.js 的世界裡自由建構 3D 舞台，接下來只要一步步加入光源、材質、動畫與互動，就能打造出完整且具備商業價值的 Web 3D 應用。祝你玩得開心，創作無限！