# 線上 3D 編輯器：建模、材質與動畫 - Spline (https://spline.design/zh-hant/3d-design)

> Spline 的 3D 編輯器直接在瀏覽器中執行。與你的團隊和 AI 代理一起建模、加上紋理並製作互動式 3D 動畫，再發布到網頁、iOS 和 Android。

# 你的團隊與 AI 代理共同創作的 3D 編輯器

建模、加上紋理、製作動畫並賦予互動，大家一起在同一個即時檔案中完成，直接在瀏覽器裡。**AI 代理打造初版**，設計師負責打磨，接著發布到網頁、iOS 和 Android。

[開始創作](https://app.spline.design/signin)[連接你的 AI 代理](https://spline.design/zh-hant/mcp)

團隊如何使用 Spline

## 一個檔案，從提示詞到正式上線

AI 代理與設計師在同一個即時場景中輪流接手。彼此之間不必匯出、重新匯入或重做。

1. 01  
### 提示詞  
描述場景。你的 AI 代理會讀取檔案並搭出雛形：形狀、燈光和一台攝影機。
2. 02  
### 一起打造  
設計師加入同一個即時檔案，建模、調整材質並留言，同時 AI 代理繼續工作。
3. 03  
### 交還給代理  
選取任何東西並要求修改：一個懸停狀態、一個變體、一條時間軸。你看到的，AI 代理也看得到。
4. 04  
### 發布  
發布到網頁、匯出程式碼，或把同一個檔案帶到 iOS 和 Android。

設計、AI 與程式碼

## 在 3D 中建模，有 AI 代理隨侍在側

熟悉的設計工具與即時渲染，再加上能打造場景、撰寫程式碼的 AI 代理。

- 即時渲染
- 基本形狀與 3D 建模
- AI 代理式編輯
- 自訂 UI 與邏輯程式碼

或請你的 AI 代理代勞

搭出一座有瀑布的低多邊形小島雛形。

材質與著色

## 圖層式材質

透過堆疊圖層打造獨特材質，不必撰寫著色器；也可以從現成的材質庫開始。

- 圖層式材質系統
- 玻璃、菲涅耳與置換
- 現成的材質庫

讓水更像玻璃，邊緣帶一點柔和的菲涅耳效果。

互動與動態

## 讓你的場景活起來

使用 Spline 的事件系統加入互動與動畫：狀態、時間軸、遊戲控制與物理。

- 狀態與事件
- 時間軸動畫
- 遊戲控制
- 物理與粒子

讓小船循環上下擺動，點一下就翻覆。

變數與資料

## 即時資料，以 3D 呈現

用來自變數、Webhook 和 API 的即時數值，驅動場景所呈現的內容。

- 變數
- Webhook 與 API 請求
- 條件式動作

在記分板上顯示我們 API 的即時比分。

> 「有了 Spline，我們能夠**打造互動式 3D 物件，讓我們的產品變得觸手可及。**這不只是裝飾，**更是我們展現對細節用心的方式。**」

**Zeh Fernandes**Resend 創始設計師

協作

## 即時一起設計

### 即時協作

每個人（包括 AI 代理）都在同一個即時場景中編輯，並能看到彼此的游標。

### 留言

直接在場景中給團隊意見回饋，或留下給自己的筆記。

### 團隊、專案與資料夾

依團隊和專案整理工作，並透過連結分享檔案。

功能

## 完整的 3D 設計工具組

從第一個基本形狀到最終匯出，打造可上線 3D 作品背後的所有工具。

### 3D 建模與布林運算

運用多種 3D 工具，打造任何類型的物件。

### 3D 向量編輯

你熟悉的向量工具，現在用在 3D 空間中。

### 攝影機控制

使用攝影機環繞與構圖你的場景。

### 元件

以可重複使用的元件打造 3D 設計系統。

### 範本庫

現成可用的 3D 設計、範本與物件。

### 拖放

不寫程式就能做出 3D 拖放互動。

### 物理

剛體、碰撞體、重力與作用力，即時模擬。

### 變數

用數字、布林值和文字驅動物件、狀態與介面。

### 材質素材

將紋理和顏色作為素材管理，保持井然有序。

### PBR 與 HDR 工作流程

物理材質、HDRI 照明與 PBR 匯出。

### 影片紋理

透過影片紋理圖層，在模型上播放影片。

### 後製處理

以光暈、景深與調色完成最終質感。

### WebGPU 渲染

編輯器與匯出內容皆以 WebGPU 渲染，並以 WebGL 作為備援。

### 圖片、影片與 3D 匯出

JPG 和 PNG、MP4 和 GIF，或 GLTF 和 USDZ。

### 程式碼匯出

把你的設計直接放進 React 專案。

### [AI 3D 生成](https://spline.design/zh-hant/ai-generate)

從提示詞或圖片生成模型，直接用在你的場景中。

### [Spline MCP](https://spline.design/zh-hant/mcp)

從 Claude、ChatGPT、Cursor 和其他 AI 代理操控編輯器。

依團隊、專案和資料夾整理你的 3D 作品。

發布

## 一個場景，橫跨網頁、Apple 與 Android。

同一個檔案可以發布成網站、iPhone App 或 Android App。每個平台都有專屬的原生渲染器，場景的互動性與效能都能完整保留。

- [WebWebGPU · WebGL發布一個連結、嵌入檢視器，或匯出適用你技術堆疊的程式碼並自行託管。](https://spline.design/zh-hant/web)
- [AppleMetal在你的 App 中加入原生 SwiftUI 檢視，或生成可直接上架 App Store 的 Xcode 專案。](https://spline.design/zh-hant/ios)
- [AndroidVulkan透過 Jetpack Compose 加入原生檢視，或直接從 Spline 建置 APK 或 App Bundle。](https://spline.design/zh-hant/android)

prompt.md

常見問題

## 你的問題，這裡有解答

Spline 是免費的嗎？

是的。Free 方案每月 0 美元，提供瀏覽器中的 3D 設計編輯器、Spline Library 和網頁匯出。付費方案再加上 AI 點數、更多檔案和更多匯出方式。

可以在瀏覽器中做 3D 設計嗎？

可以。Spline 直接在瀏覽器中執行，不必安裝任何軟體，並以 WebGPU 渲染、以 WebGL 作為備援。另外也有適用 Mac 和 Windows 的桌面 App。

需要有 3D 建模經驗嗎？

不需要。從基本形狀或 Spline Library 開始，或描述你想要的內容，讓 AI 代理打造初版。如果你用過設計工具，圖層、屬性和即時畫布都會讓你感到熟悉。

可以用 Spline 做什麼？

為網站和 App 打造互動式 3D：主視覺場景、產品檢視器、遊戲、資料視覺化和有景深的介面，並透過狀態、事件、時間軸動畫和物理讓它們活起來。

我的 3D 設計可以用在哪裡？

透過連結或嵌入發布到網頁、把場景放進你的 React 專案，或把同一個檔案帶到 iOS 和 Android。你也可以匯出圖片、影片、GLTF 和 USDZ。

可以和團隊及 AI 代理一起做 3D 設計嗎？

可以。每個檔案都是即時的：你的團隊可以即時一起建模、留言和審閱。Claude、ChatGPT、Cursor 和其他 AI 代理也能透過 Spline MCP 在同一個檔案中工作。

## 開始打造 3D

連接你的 AI 代理、邀請你的團隊，今天就發布你的第一個 3D 場景。

[Spline](https://spline.design/zh-hant)

為團隊及其 AI 代理打造的 3D 與 2D 編輯器。一鍵發布到網頁、iOS 和 Android。

#### 向 AI 詢問 Spline

#### 產品

- [3D 設計](https://spline.design/zh-hant/3d-design)
- [Hana](https://spline.design/zh-hant/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh-hant/ai-generate)
- [Spline MCP](https://spline.design/zh-hant/mcp)
- [Spline Arena](https://spline.design/zh-hant/arena)
- [價格](https://spline.design/zh-hant/pricing)
- [企業](https://spline.design/zh-hant/enterprise)

#### Runtime

- [Web](https://spline.design/zh-hant/web)
- [iOS](https://spline.design/zh-hant/ios)
- [Android](https://spline.design/zh-hant/android)

#### App

- [下載](https://spline.design/zh-hant/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下載 Spline Mirror](https://spline.design/download-mirror)

#### 學習

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh-hant/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解決方案](https://spline.design/solutions)

#### 社群

- [Spline 社群](https://community.spline.design)
- [Blog](https://spline.design/zh-hant/blog)
- [更新日誌](https://spline.design/zh-hant/changelog)
- [教育](https://spline.design/zh-hant/education)
- [Contra](https://spline.design/contra)
- [聯盟行銷](https://spline.design/zh-hant/affiliate)

#### 公司

- [客戶](https://spline.design/zh-hant/customers)
- [工作機會](https://www.ycombinator.com/companies/spline/jobs)
- [安全性](https://spline.design/zh-hant/security)

#### 法律資訊

- [條款與細則](https://spline.design/terms)
- [隱私權](https://spline.design/privacy)

#### 聯絡我們

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.