Three.js WebGL 3D 網頁動畫入門：打造互動式 3D 場景

說真的，第一次在網頁上看到流暢的 3D 動畫時，我整個人是震驚的。那不是影片，是真正可以用滑鼠旋轉、縮放的即時 3D 場景。後來才知道，背後的功臣就是 Three.js 搭配 WebGL。如果你也想在網頁上玩 3D，這篇就是你的起點。

Three.js 簡介與 WebGL 的關係

WebGL 是瀏覽器原生支援的 3D 圖形 API，直接操作 GPU 來渲染畫面。但問題是，原生 WebGL 的程式碼寫起來超級痛苦，光畫一個三角形就要上百行 code。Three.js 就是為了解決這個問題而生的 JavaScript 函式庫，它把 WebGL 的底層操作封裝成直覺的物件導向 API，讓你用幾十行程式碼就能建出一個完整的 3D 場景。

我個人覺得 Three.js 最大的優勢是社群生態。文件完整、範例超多、Stack Overflow 上幾乎什麼問題都找得到答案。對入門者來說，這比什麼都重要。

Scene、Camera、Renderer 三大核心元素

Three.js 的世界觀很簡單：你需要一個場景（Scene）放東西、一個攝影機（Camera）決定從哪裡看、一個渲染器（Renderer）把畫面畫出來。這三個搞定，3D 世界就建起來了。

import * as THREE from 'three';

// 建立場景
const scene = new THREE.Scene();

// 建立透視攝影機
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.z = 5;

// 建立渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加入一個立方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 加入光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 動畫迴圈
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

這段程式碼就能在瀏覽器裡顯示一個旋轉的綠色立方體。沒錯，就這麼簡單。Camera 的四個參數分別是視角、畫面比例、近裁切面和遠裁切面，初學先用預設值就好。

光源與材質：讓物體有真實感

3D 物體好不好看，80% 取決於光源和材質的搭配。Three.js 提供了好幾種光源：

• AmbientLight：環境光，均勻照亮所有物體，沒有方向性
• DirectionalLight：方向光，模擬太陽光，平行照射
• PointLight：點光源，從一個點向四周發散
• SpotLight：聚光燈，有角度範圍的光源

材質方面，MeshBasicMaterial 不受光影響（平面色塊），MeshStandardMaterial 支援 PBR 物理渲染，是最常用的選擇。想要金屬感就調 metalness，想要光滑反射就調 roughness。

幾何體建模基礎

Three.js 內建了常用的幾何體：BoxGeometry（方塊）、SphereGeometry（球體）、PlaneGeometry（平面）、TorusGeometry（甜甜圈）等等。這些基本形狀組合起來，就能做出不少有趣的場景。

如果需要更複雜的模型，通常會用 Blender 建模後匯出 .glTF 或 .glb 格式，再用 Three.js 的 GLTFLoader 載入。glTF 是目前 Web 3D 的標準格式，檔案小、載入快，強烈推薦使用。

動畫迴圈與 requestAnimationFrame

requestAnimationFrame 是瀏覽器提供的動畫排程 API，它會在每次螢幕重繪前呼叫你的函式，通常是每秒 60 次。比起 setInterval，它更省效能，而且當使用者切到其他分頁時會自動暫停。

在動畫迴圈裡，你可以修改物體的 position、rotation、scale 來產生動畫效果。搭配 THREE.Clock 可以取得精確的時間差，讓動畫速度不受幀率影響。

GSAP ScrollTrigger 整合：捲動驅動 3D 動畫

把 3D 場景跟頁面捲動結合，是目前最潮的網頁設計手法之一。透過 GSAP 的 ScrollTrigger，你可以根據使用者的捲動位置來控制攝影機移動、物體旋轉、甚至場景切換。

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

gsap.to(camera.position, {
  z: 2,
  scrollTrigger: {
    trigger: '#section-2',
    start: 'top center',
    end: 'bottom center',
    scrub: 1,
  },
});

這段程式碼會在使用者捲動到 #section-2 時，平滑地把攝影機推近。效果非常震撼，很多品牌官網都在用這招。想深入了解 ScrollTrigger 的用法，可以參考GSAP ScrollTrigger 捲動動畫完整教學。

React Three Fiber：在 React 中使用 Three.js

如果你的專案用 React，那 React Three Fiber（R3F）絕對是首選。它把 Three.js 的物件變成 React 元件，用 JSX 語法來描述 3D 場景，寫起來超直覺：

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <mesh rotation={[0.5, 0.5, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="#00ff88" />
      </mesh>
      <OrbitControls />
    </Canvas>
  );
}

R3F 的生態系也很成熟，@react-three/drei 提供了大量現成的元件（軌道控制、環境光照、文字、載入進度等），@react-three/postprocessing 則處理後製特效。

Shader 特效入門

Shader 是跑在 GPU 上的小程式，用 GLSL 語言撰寫。它分成 Vertex Shader（控制頂點位置）和 Fragment Shader（控制每個像素顏色）。Three.js 透過 ShaderMaterial 讓你自訂 Shader：

Shader 的學習曲線確實比較陡，但掌握之後能做出水面波紋、粒子系統、扭曲變形等原生 Three.js 做不到的效果。建議先從 ShaderToy 上找靈感，慢慢修改別人的程式碼來學習。

效能優化策略

3D 網頁最怕的就是卡頓。以下是幾個實戰中最有效的優化技巧：

• 降低多邊形數量：模型面數越少越好，用法線貼圖（Normal Map）來偽造細節
• 使用 InstancedMesh：大量重複物體用 instancing 渲染，GPU 只需一次 draw call
• LOD（Level of Detail）：遠處的物體用低精度模型，節省運算資源
• 紋理壓縮：用 KTX2/Basis 格式壓縮貼圖，減少 GPU 記憶體佔用
• 設定 Pixel Ratio：用 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) 避免在高 DPI 螢幕上過度渲染
• 按需渲染：如果場景是靜態的，只在需要時才呼叫 renderer.render()

實際應用案例

產品 3D 展示

越來越多電商品牌把產品做成 3D 模型放在網頁上，讓使用者可以 360 度旋轉查看。Nike、Apple 都在用這種手法。搭配 OrbitControls 就能輕鬆實現互動式產品展示。

個人作品集

設計師和開發者的作品集網站加入 3D 元素，辨識度直接拉滿。可以做一個 3D 空間讓訪客在裡面「走動」瀏覽作品，或是用粒子動畫當背景。

資料視覺化

複雜的數據用 3D 圖表呈現，比平面圖表更直觀。Three.js 搭配 D3.js 可以做出震撼的 3D 數據視覺化效果。

如果你對更輕量的 3D 工具有興趣，也可以看看 Spline 3D 網頁互動設計教學，它提供視覺化的編輯介面，不用寫程式也能做出不錯的 3D 場景。而如果你需要的是更精細的互動狀態控制，Rive 2 State Machine 互動動畫進階教學也值得一讀。

總結與學習路線建議

Three.js 的學習路線我建議這樣走：先搞懂 Scene/Camera/Renderer 的基本架構，然後練習光源和材質搭配，接著學動畫迴圈和使用者互動，最後再挑戰 Shader 和效能優化。

2026 年的 Three.js 生態已經非常成熟，搭配 React Three Fiber、GSAP、以及各種 Loader，基本上什麼 3D 網頁效果都做得出來。最重要的是動手做，從一個簡單的旋轉方塊開始，慢慢加入光影、動畫、互動，你會發現 3D 網頁開發比想像中有趣得多。