用 Blender MCP + Three.js 搭出可驗收的 AI 3D 工作流：先寫 3D brief、用 render 做視覺 QA、輸出最佳化 GLB，最後交給 React Three Fiber 呈現。適合想讓 GPT-6 Astra 這類 agent 穩定產出高質感網站、而不是華麗 demo 的團隊。
真正的核心不是「一鍵做完」。社群上常見的 Blender MCP + Three.js 成果，看起來像是一句話生成模型、再自動變成高級網站；實際上，高品質來自一條可反覆驗證的 3D 資產生產線。GPT-6 Astra 這類 agent 的優勢，不是一次性產出程式碼，而是能操作 Blender、讀取 render、撰寫 Three.js、執行測試並根據結果修正。只要先把美術判斷轉成約束條件，AI 就能穩定交付「技術正確且視覺合格」的成果。
品質來自三個疊加層
- 嚴格的 art direction：材質、燈光、鏡頭語言、色彩、背景、動態節奏都有明確規格。
- 可驗收的 Blender 迭代：每一輪都輸出 render 或 viewport screenshot，讓 agent 依視覺結果修正，而不是只靠文字猜測。
- 針對 Web 的資產最佳化：最後交付不是原始
.blend，而是為 Three.js 準備的.glb、壓縮貼圖、LOD 與動畫資料。
端到端工作流
品牌策略 / 視覺參考
↓
設計規格（3D brief）
↓
Agent + Blender MCP 建立 blockout
↓
Render 截圖 → Vision QA → 精修迴圈
↓
Bake / UV / PBR textures / GLB export
↓
glTF 壓縮、貼圖壓縮、LOD
↓
Three.js / React Three Fiber 實作互動
↓
Web 性能、裝置與視覺驗收
1. 先建立可執行的 3D brief
好的 prompt 不會只有「做一雙高級球鞋」。團隊會先建立類似 art-direction.md 的規格，讓 agent 在後續每一步都能回查。以下是一個可參考的 Hero 區規格：
產品：限量跑鞋 Landing Page Hero
構圖：鞋子斜向懸浮，鏡頭 50mm，略低角度
材質：白色織物、霧面橡膠、金屬扣環
光線：深灰攝影棚、主光由左上、右側冷色 rim light
畫面：背景極簡；物件占畫面 65%
互動：滑鼠移動產生細微旋轉；捲動切換爆炸圖
交付：Web 用 GLB，不可超過 5 MB，2K 以內貼圖
這一步就是品質分水嶺：模型負責執行與迭代，人類或主 agent 先把美術判斷轉成約束條件。否則即使模型很強，也容易得到「技術上正確、視覺上像 AI demo」的結果。
2. Blockout：先對輪廓與鏡頭，不做細節
Blender MCP 讓模型透過結構化指令控制 Blender 場景：有些實作透過 JSON/TCP 即時控制，較成熟的 headless 路徑則讓 agent 在背景啟動 Blender、建立或修改場景、渲染，最後輸出 .glb / .gltf。
Agent 先做低成本幾何草模，例如建立鞋底、鞋面、金屬件、舞台、攝影機與主燈。此時重點不是拓撲，而是：
- 主體比例是否正確。
- 產品在螢幕中的大小與角度。
- 負空間是否適合放標題與 CTA。
- 第一屏是否有足夠強的輪廓辨識度。
如果需要人工美術介入，可以切換到 live GUI bridge，直接觀看 agent 對 viewport 的修改。
3. Render → 視覺 QA → 修正
這是整個流程最容易被忽略、卻最關鍵的一段。每個迭代回合通常是：
Agent 寫 bpy script / 呼叫 Blender MCP
→ Blender 更新模型、材質與燈光
→ 輸出 viewport PNG 或 Cycles render
→ Vision-capable model 比對規格與參考圖
→ 列出具體差距
→ Agent 只修一組明確問題
→ 再 render
QA 回饋不應是「再高級一點」，而是：
- 鞋面網布 roughness 過低，看起來像塑膠。
- 鏡頭太高，無法凸顯鞋底弧線。
- rim light 太亮，邊緣發白而失去材質細節。
- CTA 預留區被鞋跟侵入。
- 背景與產品陰影對比不足。
接著 agent 針對性調整 Principled BSDF 的 roughness、normal、metallic，修改 camera focal length / transform，以及調整 area light 的尺寸、能量與位置。可用的 Blender MCP 工具通常涵蓋自然語言建模、材質、燈光、動畫、render 與 GLB export；若支援 inline bpy script，精密調整會更可靠。
4. 為 Web 製作資產：不要直接把渲染品質搬上網頁
高級 render 不等於好的 WebGL 體驗。上網站前，需要刻意執行以下資產管線：
| 階段 | 實務做法 | 原因 |
|---|---|---|
| 幾何 | 清掉不可見面、重複物件與過度細分；必要時重新拓撲 | 降低 draw calls 與 GPU 負擔 |
| 材質 | 盡量使用標準 PBR workflow；控制材質數量 | Three.js 的 MeshStandardMaterial 可穩定接收 |
| 貼圖 | 將 procedural node bake 成 Base Color、Normal、Roughness、Metallic 等貼圖 | 瀏覽器不會完整重現 Blender node graph |
| 光線 | 即時主光 + baked AO / lightmap，或 HDRI 環境光 | 避免在手機端做昂貴 Cycles 級計算 |
| 匯出 | 優先 .glb；採用 Draco / Meshopt 與 KTX2/Basis 貼圖壓縮 |
減少下載、解析與顯存壓力 |
| 分級 | Hero 使用高 LOD；背景或離鏡頭遠的物件用低 LOD | 兼顧首屏品質與流暢度 |
Blender MCP 的輸出可包含 .glb、.gltf、.fbx、.obj，其中 GLB 最適合當 Three.js 的單檔交付格式。這代表 Blender 在流程中是「資產編譯器」，而非網站 runtime 的一部分。
5. Three.js 只做呈現、互動與敘事
實務上多用 React Three Fiber（R3F）包裝 Three.js，再將網站分成 DOM 層與 WebGL 層：
Next.js / React
├── DOM Layer
│ ├── Navigation、標題、產品規格、CTA、SEO 文字
│ └── GSAP / Lenis scroll orchestration
└── WebGL Layer
├── R3F Canvas
├── GLB product model
├── Environment / lights
├── Mouse parallax
└── Scroll-driven camera / animation state
關鍵原則是：**文字、購買 CTA、商品資料、可存取性與 SEO 仍留在 DOM；Three.js 只承擔無法用 HTML/CSS 達到的空間感與互動。**這比「整站塞進 canvas」更好維護、可索引，也比較適合轉換導向的 D2C 或 B2B 頁面。
以下是一個捲動綁定的概念：
const progress = scrollYProgress.get()
camera.position.z = 5 - progress * 2
product.rotation.y = progress * Math.PI * 2
explodedGroup.position.x = progress > 0.55 ? 0.8 : 0
真正完成版不會每個 scroll event 都直接重算複雜場景，而是以平滑後的 scroll progress 控制少量 transform、morph target、camera timeline 或 baked animation。首次載入先顯示 poster image / 簡化場景，GLB 解碼完成再升級品質。
可複製的 Agent 分工
最值得建立的是「主 agent 統籌 + 專責 agent 產出可驗收物」：
| Agent | 工作輸出 | 驗收標準 |
|---|---|---|
| Creative Director | art-direction.md、參考圖與鏡頭清單 |
每個畫面有構圖、材質、光線與品牌規則 |
| Blender Builder | .blend、scene.py、render PNG |
模型比例、命名、材質與鏡頭符合 brief |
| 3D Technical Artist | 已 bake 的 GLB、壓縮報告 | 檔案大小、貼圖尺寸、draw calls 與 LOD 合格 |
| Frontend Engineer | R3F / Three.js 網站、互動程式 | loading、responsive、fallback、DOM 內容完成 |
| QA Agent | Screenshot 對比、Lighthouse、真機測試紀錄 | 視覺一致、手機可用、性能門檻達標 |
GPT-6 Astra 這類模型適合擔任 coordinator：讀取規格、叫用 Blender MCP、檢查 render、撰寫 Three.js、跑前端 QA。但「高級感」仍要透過可量化的視覺規格與迭代輸出來約束，而不是寄望單一提示詞。
最容易失敗的地方
- 過早追求高面數：模型細節過多，卻沒有可見的視覺收益，最後手機載入崩壞。
- 未 bake Blender shader：在 Blender 好看，輸出 GLB 到 Three.js 後材質完全變樣。
- 把 Scroll 當成連續重渲染：捲動應驅動少量狀態與 timeline，不能每次都重建 scene。
- 沒有 fallback：低階 Android、低電量模式、WebGL 不可用時，應顯示靜態高品質圖片與正常 DOM CTA。
- AI 未被拆成階段任務：一次叫 agent「做高級網站」通常得到華麗但難維護的程式；把需求拆成 brief、blockout、render QA、asset export、Web 整合，結果才會穩定。
第一個練習：用五個約束做出單一產品 Hero
選一個單一產品 Hero，只定義「鏡頭、材質、燈光、檔案預算、互動」五項約束，並要求 agent 每一次修改都輸出 render 讓你核准。先跑完一個小案例，再擴展到完整 Landing Page，你會更清楚哪些規格才是高質感的真正來源。