AI 現在能做哪些 3D？2026 沉浸式 Landing Page 實戰地圖

執行摘要

研究日期：2026 年 8 月 22 日。 本文以 immerseland：AI-Native Immersive Landing Page 為應用情境，假設主要讀者是品牌主、行銷人員、設計師與 Open Brand 經營者，具備有限的前端開發能力，但能使用 Claude Code、Codex 等 AI Coding 工具協助實作。工具價格均以官方網站查核當下的美元定價為準，未含稅，方案與 credits 可能隨時調整。

AI 與 3D 的關係，到了 2026 年已經不只是「輸入一句 Prompt，產生一個 3D 模型」。現在的 AI-3D 工作流已經可以涵蓋 文字／圖片生成 3D、真實商品數位化、材質生成、角色動畫、3D 世界生成、互動場景設計，以及由 AI Agent 直接控制 3D Editor 與網站程式碼。Stable Fast 3D 等研究已展示單張圖片快速重建帶材質 Mesh 的能力；Tencent Hunyuan3D 2.1 開源了高品質 PBR 資產生成系統，而 World Labs Marble、Tencent HunyuanWorld 則把生成目標從「物件」推進到「可探索的世界」。

對 immerseland 最重要的結論是：AI-3D 已經足以進入實際 Landing Page 生產流程，但不應該把「整頁都做成 3D」當成目標。

現階段最值得商業化的是三件事：第一，用 AI 快速取得商品與視覺物件；第二，用 Spline、Three.js、React Three Fiber 等把這些物件變成可操作、可 Scroll 推進的體驗；第三，用 Claude Code、Codex 與 MCP／CLI 把模板快速 Remix 成不同品牌。

Spline 在 2026 年 8 月 21 日剛發布 Spline V2，明確把新版定位為「為 agentic era 重建的 3D editor」：外部 Claude Code、Cursor 等 Agent 可透過 MCP 操作場景，內建 Agent 可修改物件、材質、燈光、Camera、Particles、Events、States 與 Code；新版預設 WebGPU 並以 WebGL fallback。

這尤其值得注意：2026 年 3 月 Spline 推出的 Omma 已經直接把 「high-end 3D landing page」 列為 Agent 可生成的應用之一，並支援 Three.js、React Three Fiber、程式碼、3D Mesh 與多 Agent 並行。Meshy 也已提供官方 MCP Server，讓 Claude Code、Codex、Cursor 等直接呼叫 Text-to-3D、Image-to-3D、Multi-image-to-3D、材質、Remesh、Rigging 與 Animation；Tripo 則提供可直接交給 Claude Code 或 Codex 安裝的 CLI。

「AI-Native Immersive Landing Page」已經從品牌概念，開始變成可實作的工作方式。

我對 immerseland 的現階段優先順序是：

原因不是第三類不夠先進，而是 Homepage、Product、Campaign 最終仍然需要清楚的故事節奏與 CTA。

對 Landing Page 而言，3D 是敘事媒介，不是目的本身。

一、AI-3D 現在可以做的七種應用

下表把「AI 可以做哪些 3D」直接轉換成 immerseland 最有價值的 Homepage、Product 與 Campaign 使用方式。適用程度是本文依 Landing Page 商業需求所做的判斷，不是工具官方評級。

需要先弄懂的一個概念：Gaussian Splatting

傳統 Mesh 是由大量三角形組成物件；3D Gaussian Splatting 則以大量帶有位置、大小、方向、顏色與透明資訊的 3D Gaussian 表示場景。2023 年原始論文的核心成果之一就是高品質的即時 Novel-view Rendering；到了 2026 年，World Labs 的 Spark 已讓 Gaussian Splats 可以直接整合進 Three.js 網頁工作流。

對非技術讀者，可以簡單記成：

Mesh 適合「我要操作這個商品」。
Gaussian Splat 適合「我要進入這個空間」。

這不是絕對界線，而是一個很實用的 immerseland 選擇原則。World Labs Marble 同時可以輸出 Gaussian Splats 與 Mesh，也顯示未來兩種表示方式會愈來愈常混合使用。

另一個值得注意的方向是 開源 AI-3D。Tencent 的 Hunyuan3D 2.1 在 2025 年公開模型、PBR 系統與訓練程式碼；HunyuanWorld 1.0 則朝文字／圖片生成可探索互動世界發展。這類開源模型對 immerseland 短期不一定比 SaaS 好用，但對未來自建生成服務、降低單一供應商依賴，以及建立自己的 3D Pipeline 很重要。

一張圖看懂整條鏈

flowchart LR
    A[品牌素材 / 商品照片 / Prompt] --> B{AI 3D}
    B --> C[Mesh / GLB<br/>Meshy・Tripo・Rodin・Polycam]
    B --> D[World / Gaussian Splat<br/>Marble]
    C --> E[Spline V2 / Three.js / model-viewer]
    D --> F[Spark / Three.js]
    E --> G[Claude Code / Codex Remix]
    F --> G
    G --> H[Homepage]
    G --> I[Product]
    G --> J[Campaign]

這個架構的關鍵不是工具名稱，而是把 Asset Generation → Experience Design → AI Remix → Web Delivery 四段分開。這樣 immerseland 才不會被任何單一生成模型綁住。Meshy、Tripo、Rodin 都可輸出主流 3D 格式；Polycam 明確提供 glTF 給 Three.js 等工作流；Spline 則可以直接發布到 Web 並提供 Viewer 與 Code integration。

二、目前最值得關注的工具與平台

以下價格皆查核於 2026-08-22。其中「易用度」是以「行銷／設計人員、有限開發能力」為對象的本文評估，不是官方評分。

如果只能先選一個

如果只能替 immerseland 選一個 起步核心，我的判斷會是 Spline V2。

原因不在於它一定產生最高品質的 3D Model，而是它目前最接近 immerseland 真正需要的「Asset + Scene + Camera + Motion + Interaction + Web + Agent」一體化工作流。尤其 2026 年 8 月 21 日的 V2 新版，已讓外部 AI Agent 透過 MCP 操作 Editor，內建 Agent 又可以深度修改完整 Scene——這比單純 Image-to-3D 更貼近「AI-Native Immersive Landing Page」。

而 Meshy 與 Tripo 最適合當上游 Asset Factory。Meshy 的官方 MCP Server 已把生成、下載、Remesh、Retexture、Rig、Animation 暴露給 Claude Code、Codex 等 AI Agent；Tripo 的官方 Developer Portal 甚至直接提供一句可以貼進 Claude Code、Codex 或 Cursor 的 CLI 安裝 Prompt。

未來 immerseland 可以讓使用者不離開 AI Coding 工作流，就完成「缺一個 3D 道具 → AI 自己生成 → 放進 Landing Page」。

如果需要的是真實商品，則應優先考慮品牌原有 CAD／3D 檔、Multi-view 圖片或 Polycam 類 Capture，而不是單純讓生成模型猜。Rodin 明確指出單張圖片可以生成多數物件，但額外視角能提供更多細節控制；Tripo、Meshy 也都提供 Multi-view／Multi-image 模式。這意味著對 Product Landing 而言，圖片數與原始資料品質依然重要。

Web 發布的四層選擇

Google 的 <model-viewer> 專注於在 Web 顯示 glTF/GLB，並支援 WebXR、Scene Viewer、Quick Look 等 AR 模式；Three.js 則提供 GLTFLoader 與完整 3D Rendering 控制，React Three Fiber 是 React 生態中的 Three.js Renderer。World Labs Spark 則補上 Gaussian Splat 與 Three.js 之間的連結。

三、從一張圖片到上線：非技術團隊的實作方式

對 immerseland，我不建議工作流程從「先生成 3D」開始，而應該從 「這一幕要讓使用者感受到什麼？」 開始。Spline 的 Elecctro 案例就是先做靜態 Wireframe，再逐步加入 Motion；Onyx Coffee 的流程也是先有高品質商品視覺，再做 Storyboard 與 Keyframes，最後才進 Spline 動畫與網站整合。

一套適合非技術團隊的流程可以簡化成七步：

體驗腳本 → 取得 3D → 建立場景 → 設計 Scroll／Interaction → AI Coding 整合 → 行動裝置優化 → 上線與測試

第一步：決定唯一的「3D Moment」

例如香水，不是「我要做一個 3D 網站」，而是：

使用者進站後看到香水從霧中浮現，Scroll 接近瓶身，點擊香調後環境材質與燈光改變，最後 Camera 拉回並出現購買 CTA。

第二步：判斷 3D 資料來源

• 想像中的場景物件 → Meshy、Tripo、Rodin
• 真正要販售的實體產品 → 品牌既有 CAD／3D、多視角商品照片或 Capture
• 想做整個世界 → 才考慮 Marble 或 Gaussian Splat

各平台已可輸出 GLB/glTF 等主流格式，方便進入 Spline 或 Three.js。

第三步到第七步：場景、整合與優化

第三步在 Spline 或 Three.js 裡設計 Camera、Lighting、Motion 與 Interaction。Spline V2 已能讓 Agent 修改 Camera、材質、Particles、Events、States 和 Code；若需要非常客製的行為，Three.js／R3F 則提供更完整控制。Spline 官方也提醒 Post-processing 效果會影響輸出效能，因此 Bloom、Depth of Field、Noise 等效果不宜無限制堆疊。

最後才讓 Claude Code 或 Codex 進入網站專案：把 3D Scene 掛進既有 Landing Page、把 Scroll Progress 對應到 Camera、保持 CTA 為一般 HTML 元素、加上 Mobile fallback 與 reduced-motion 版本，並測試低階裝置。React Three Fiber 官方效能指南也明確指出 WebGL Rendering 具有成本，需要 On-demand rendering、動態 Performance scaling 等策略。

需要準備的 Assets

團隊角色也不需要被傳統 3D Studio 的組織方式綁住。對 immerseland 這種小型團隊，我會設計成四個角色：Experience / Creative Director、AI-3D Generalist、AI Coding / Web Integrator、QA / Performance。早期甚至可以由兩個人兼任四個角色；真正重要的是把「體驗設計」與「技術實現」分開，而不是增加職稱。

時間與成本估算

以下是 immerseland 規劃估算，不是供應商報價或 SLA。估算依據包括目前工具費、官方工作流，以及 Spline 客戶案例中「小團隊、一週內建立可用 MVP」等生產經驗；實際時間最大的變數仍是商品模型精度、動畫複雜度、客製 Shader 與行動裝置 QA。

為什麼「生成一個模型只要幾秒或幾分鐘」，最後網站還可能需要幾天？因為真正花時間的通常不是第一次 Generation，而是 選擇、修正、品牌準確度、Camera、Narrative、Responsive、Loading 與 QA。

AI 大幅縮短 Asset Creation，但不會自動替品牌做出好的 Creative Direction。

這也是 AI-3D 最容易被市場誤解的地方。Tripo、Meshy 已將生成成本壓到低額 credits；Spline 案例則顯示真正的作品流程仍包括 Storyboard、Scene Design、Motion 與 Web Integration。

四、真實案例、效益與目前限制

Onyx Coffee Lab：3D 不只是裝飾，而是 Product Story

Spline 2026 年官方案例顯示，Onyx Coffee Lab 在自訂 Shopify Frontend 中使用 Spline Viewer 與 Code API 控制 Scene。Circadian 商品頁透過 3D Motion 表現不同咖啡因層級與產品變體；其工作流由產品 Render、Storyboard／Keyframes、Spline Animation，再到網站 Embed。

這非常接近 immerseland 的 Product Landing 模式：不是把一個旋轉商品擺在 Hero，而是用 3D 解釋產品差異。

最好的 Product 3D 不是「可以轉」，而是「這個互動只有這個產品需要」。

香水可以是氣味與光線改變；鞋子可以是鞋底分解；咖啡可以是咖啡因與風味；耳機可以是聲場；手錶可以是機芯。這是 Experience Design，而不是把相同的 Orbit Viewer 套到所有商品。

Elecctro：Homepage 從 Section Stack 變成 Spatial Narrative

Spline 的 Lynksen／Elecctro 案例用互動式 3D Homepage 解釋一個原本較抽象的 B2B Platform。團隊過去沒有 3D 經驗，先從靜態 Wireframe 建構內容，再加入 Hover、Scroll Reveal、Camera Transition 與 Motion；官方案例稱團隊第一週已完成 solid MVP。

Spline 同時報告 Active Users +524%、20,000 個新 Views 與多個設計獎，但這些是供應商客戶案例數字，不能視為 3D 單獨造成轉換提升的因果證據。

這個案例反而帶出一個重要原則：

先有 Narrative，再加 3D。不要先做 3D，再想頁面要說什麼。

Spline V2 / Omma：Agent 開始直接參與 3D Landing Page

Spline 在 2026 年 3 月推出 Omma 時，官方已直接使用「high-end 3D landing page」作為產品例子，讓多個 Agent 同時處理 Code、Image、3D；到了 8 月 21 日 V2，外部 Agent 又可以透過 MCP 操作 3D Editor，並讓內建 Agent 修改整個 Scene。

這不是客戶成功案例，但對 immerseland 是更直接的技術訊號：未來模板使用者不一定要學會 3D Editor 的每個面板，可以直接描述自己要修改的體驗。

World Labs Marble：從頁面進化到世界

Marble 已可由文字、圖片、影片、360° 圖與 3D Layout 建立可探索世界，並可輸出 Gaussian Splats、Meshes 或 Video；其 World API 又把這些能力開放給 Web 應用，而 Spark 則將 Gaussian Splat 接到 Three.js。這讓「品牌 Homepage 是一個可進入的世界」在技術上比兩年前實際得多。

但我目前仍會把這類技術定位成 immerseland 的 Experimental / Flagship，而不是預設模板。原因是 Landing Page 還有明確商業任務：理解產品、找到 CTA、完成轉換。自由探索世界很容易讓 Experience 本身蓋過 Product。這是產品策略判斷，而不是對 World Models 技術能力的否定。

優勢與同時要注意的事

另外，不要把 AI 影片 Motion 與真正的 3D Motion 混為一談。Rokoko 在 2026 年對這個差異有很清楚的說明：一般生成式 Video Motion 最後仍是固定 Camera 的影片；真正的 Motion Capture／Video-to-3D Motion 則產生可重新設定 Camera、Retarget、編輯與重複使用的 3D 動作資料。對 Immersive Landing Page 需要即時互動的角色而言，後者才是真正可重用的資產。

五、AI Coding 如何 Remix immerseland 的 3D 模板

Claude Code 官方將自己定位為能讀取 Codebase、修改檔案、執行指令並與開發工具協作的 Agentic Coding Tool；OpenAI Codex 則可處理 end-to-end engineering tasks，並可在 Editor、Terminal 等環境完成軟體工作。當 Spline、Meshy 與 Tripo 又分別提供 MCP／CLI 時，一個新的工作流就形成了：

AI 不只改 CSS，而能同時理解 Landing Page 與它使用的 3D Assets。

下面的 Prompt 可以直接當作 immerseland Template 的產品設計方向。

Prompt 1：替換商品，但保留原本 Experience

你正在 Remix 一個 immerseland Product Landing。

先閱讀整個專案，不要立即修改。

目標：
把目前 Demo 的 3D 商品換成我提供的 product.glb，
但保留原本的敘事節奏、Camera Path、Scroll Interaction 與 CTA 結構。

體驗：
1. 首屏先看到產品輪廓，不立即顯示全部細節。
2. Scroll 前段讓 Camera 慢慢接近商品。
3. Scroll 中段展示材質與關鍵產品細節。
4. 使用者可以輕微拖曳商品，但不要讓自由旋轉破壞原本 Camera 敘事。
5. 最後 Camera 拉回，讓購買 CTA 成為視覺主角。

要求：
- 品牌名稱、Logo、產品標籤不可由 AI 自行重畫。
- 主要文字與購買 CTA 保持一般 HTML，可被搜尋與操作。
- 手機版降低 3D 複雜度。
- 支援 prefers-reduced-motion 的靜態版本。
- 3D 載入前先顯示 poster image。
- 不要為了視覺效果阻塞頁面主要內容。
- 修改完成後執行 build，列出改過的檔案與仍需人工確認的項目。

先提出修改計畫，再開始執行。

這種 Prompt 的重點不是叫 AI「幫我做一個 3D 網站」，而是明確告訴它 哪些 Experience Logic 必須保留、哪些 Brand Assets 可以換、哪些 Conversion Element 不能犧牲。

Prompt 2：用 Spline V2 Agent Remix Scene

透過 Spline MCP 開啟目前 immerseland 的 Product Reveal scene。

不要重新建立整個場景。

請把它 Remix 成一個高端香水產品頁：

- 保留目前 Camera Path 與 Scroll 節奏。
- 將主體換成我提供的 perfume.glb。
- 環境改成深色、霧感、低反射空間。
- 第一幕只顯示瓶身輪廓。
- 第二幕提高側光，逐步讓玻璃材質可見。
- 第三幕讓使用者點擊三個香調，分別改變環境光、粒子與背景材質。
- 最終狀態降低背景視覺強度，留空間給 HTML 購買 CTA。
- 不修改產品瓶身的幾何與標籤。
- 避免同時開啟過多 post-processing。
- 完成後建立一個新 Version，不覆蓋原版。

Spline V2 官方說明顯示 Agent 可以修改 Objects、Materials、Lights、Cameras、Particles、Paths、Variables、Events、Tweens、States 與 Code；新版也替每次 AI Prompt 保存 Version History，因此這種「保留模板、建立品牌 Variant」的使用方式與其 2026 架構高度一致。

Prompt 3：生成場景資產，而不是重做核心產品

我正在製作一個 immerseland Campaign Landing。

請使用已連接的 AI 3D 工具建立一個「商品展示底座」，
不要生成或修改真正的商品本體。

方向：
- abstract sculptural pedestal
- brushed dark metal
- subtle organic curves
- luxury fragrance campaign
- no logo
- no text
- no brand marks

用途是即時 Web 3D，因此：
- 優先乾淨、簡單的 geometry
- 使用 PBR materials
- 輸出 GLB
- 在視覺品質與網頁效能之間取平衡

先產生三個方向供我選擇，
選定後再做 texture / remesh / export。

這種方式特別重要：

核心商品追求真實；世界、道具、材質與氣氛才大量使用生成 AI。

如此既能保護品牌準確度，又能得到 AI 帶來的創意速度。Meshy MCP 與 Tripo API／CLI 都已支援這種「生成後再 Processing」的鏈式工作流。

Prompt 4：更前衛的 Campaign，加入 Marble

目標不是做一個自由探索遊戲，
而是一個 60–90 秒可以完成的 Campaign Landing Journey。

利用現有世界素材建立一條單一引導路徑：

Entry
→ Product silhouette
→ Environmental reveal
→ Product story moment
→ Final CTA

桌機可以提供較大的 Camera freedom，
手機只保留 guided camera path。

不要把主要文案嵌進 3D 世界，
文字與 CTA 必須保持網站 UI 層。

這正好避免 World Generation 最容易出現的問題：可以探索任何地方，卻不知道品牌到底要說什麼。

六、immerseland 的 AI-3D 導入路線與下一步

對 immerseland，我不建議一開始同時支援十套 3D 技術。最合理的路線是先建立一套 「80% 使用者不需要懂 3D，也可以成功 Remix」 的標準 Pipeline，再逐步開放更進階的 Three.js、Gaussian Splat 與 World Generation。

以下是我建議的十二週 Roadmap；它是產品規劃建議，而不是供應商時間表。

timeline
    title immerseland AI-3D 12 週導入路線
    Week 1-2 : 建立 Spline V2 基準模板
             : 定義 GLB 與 fallback 規格
             : 完成第一個 3D Product Hero
    Week 3-4 : Product Landing Template
             : Scroll Camera Narrative
             : Desktop / Mobile / Reduced Motion
    Week 5-6 : 接入 Meshy 或 Tripo
             : 測試 MCP / CLI Asset Generation
             : 建立 AI Remix Prompt
    Week 7-8 : 建立第二種 Homepage Experience
             : Template Variant System
             : 驗證 Claude Code / Codex Remix
    Week 9-10 : 加入 AI Material 與 Motion
              : Campaign Variant Workflow
    Week 11-12 : Marble / Gaussian Splat 實驗
               : 建立 Flagship Campaign Demo
               : 決定是否進入正式 Template Library

三個模板的順序

第一個 AI-3D Template 不需要做成巨大的虛擬世界。我會選：

Cinematic 3D Product Reveal

以香水為例，它的節奏是：

Darkness → Silhouette → Camera Approach → Material Reveal → Interactive Notes → Product Desire → Buy

這個 Pattern 同時可以 Remix 成香水、手錶、鞋、耳機、珠寶、飲料、精品包裝與科技產品。它能直接證明 immerseland 和傳統 Hero → Features → Testimonials → FAQ → CTA 的 Section Stack 有什麼不同。

接著再建立第二個 Immersive Brand World，服務 Homepage；第三個 Interactive Launch Experience，服務 Campaign。

如此 immerseland 的 3D 能力就不會被定義成「我們支援 Three.js」，而是被定義成：

我們已經設計好一套可以被 AI Remix 的 Immersive Experience。

值得收藏的官方資源

最具體的下一步

對 immerseland 最具體的下一步，不是「把所有 AI-3D 工具整合進平台」，而是先完成三件事：

結論

最終，AI-3D 對 immerseland 最大的價值不是：

AI 可以更快做出一個 3D Model。

而是：

AI 開始可以生成物件、建立材質、產生 Motion、創造世界、操作 3D Editor、修改網站程式碼，最後把同一個沉浸式 Experience 快速 Remix 成另一個品牌。

這正是 AI-Native Immersive Landing Page 與傳統 Landing Page 最根本的差異：

以前，3D 是昂貴的特殊專案。
現在，3D 正逐步變成可以被 AI 生成、組裝、編輯與重複使用的 Landing Experience。