為什麼工作室首頁 hero 用 3D 而不是 2D

本站首頁的 hero 是一段 61 frames 的 liquid chrome 3D 動畫 — 「H」字母融化變形成「0321」的金屬流體。整體製作 3 個工作天，相比 2D illustration 多花 5 倍時間。為什麼還是選 3D？

差異化的價值

2024 年到處都是 Apple-style 漸變、Stripe-style 線條圖、Linear-style 簡潔 UI。所有 SaaS 跟個人作品集網站視覺相似度極高。

使用者打開新網站的前 3 秒會做一個判斷：「這個工作室跟其他人有沒有不一樣」。如果 hero 是常見風格 — 答案是「沒有」，視覺記憶點 0。

3D liquid chrome 是視覺差異化的賭注：

• 製作門檻高（需要 Blender / C4D 技能）
• 很多 freelancer 用不起（多花 1 週）
• 記憶點明確（看一次記得住）

2D vs 3D 的工作量對比

實作流程

1. 在 Blender 建模

• 建一個簡單的 H 字母 mesh
• 動畫關鍵幀：H → 變形中間態 → 0321
• 用 Geometry Nodes 做流體變形

2. 材質：Liquid Chrome

• Principled BSDF：Metallic = 1, Roughness = 0.05
• HDRI 環境貼圖（用 Polyhaven 免費）
• Subsurface Scattering = 0（金屬不透光）

3. 燈光

• 主光：藍紫漸變 area light
• 背光：粉色 spot light（製造邊緣 rim）
• 整體曝光調至 -0.5 EV（避免高光燒掉）

4. 渲染：Cycles + Denoiser

• 1080×1080，每幀 256 samples
• OptiX denoiser（NVIDIA GPU）
• 輸出 PNG sequence（透明背景）

5. 轉 WebP 序列

cd renders/
for f in *.png; do
  cwebp -q 80 "$f" -o "${f%.png}.webp"
done

每張從 ~200KB PNG 壓到 ~30KB WebP，61 張總共 ~1.8MB。

網頁端整合

61 frames 在 Canvas 上根據 scroll 進度切換：

const FRAME_COUNT = 61;
const frames = [];
// 預載入
for (let i = 0; i < FRAME_COUNT; i++) {
  const img = new Image();
  img.src = 'hero-frames-new/frame_' + pad(i+1) + '.webp';
  frames[i] = img;
}

// scroll handler
function update() {
  const heroH = hero.offsetHeight;
  const y = window.scrollY;
  const p = Math.max(0, Math.min(1, y / (heroH * 0.9)));
  const idx = Math.floor(p * FRAME_COUNT);
  drawFrame(idx);
}

Performance 考量

• 分批載入：不要 61 個 image 一次 fetch，每 6 個一批
• 第一張優先：第一張載入完就 reveal hero，其餘背景載入
• Canvas DPR：在 Retina 螢幕用 devicePixelRatio 渲染避免模糊
• Mobile 提供 static fallback：?static=1 query param 只用第 1 張

什麼樣的網站不適合 3D hero

• SaaS 工具型：使用者要的是清楚的功能說明，3D 反而分散注意力
• 內容站（部落格、新聞）：載入速度比視覺重要
• e-commerce：商品圖才是主角

3D hero 適合「創作型工作室」 — 客戶就是要被視覺打動。

結語

3D 不是萬靈丹，是「願意多花 5 倍時間換差異化」的賭注。對作品集網站，這個賭注通常值得 — 因為使用者來這裡就是要看你的視覺品味。

有想做 3D hero 的朋友，可以先從 Polyhaven HDRI + Blender 教學開始，不一定要付費 C4D。