# 從零打造 3D 圖示 - Spline Academy (https://spline.design/zh-hant/academy/tutorials/create-3d-icons-from-scratch) > 嗨！在這個教學中，我們會深入探討如何用 Spline 製作 3D 圖示，內容包括將 2D 向量轉換成 3D、使用鋼筆工具，以及匯入並轉換 SVG。我們會一起從頭到尾完成一個圖示，並加上材質打造霧面玻璃效果。我們也會探索如何讓圖示具備互動性，並運用在網頁或 App 專案中。 1. [Academy](https://spline.design/zh-hant/academy) 2. [教學](https://spline.design/zh-hant/academy/tutorials) 3. 從零打造 3D 圖示 # 從零打造 3D 圖示 Spline 3D入門16 分鐘 嗨！在這個教學中，我們會深入探討如何用 Spline 製作 3D 圖示，內容包括將 2D 向量轉換成 3D、使用鋼筆工具，以及匯入並轉換 SVG。我們會一起從頭到尾完成一個圖示，並加上材質打造霧面玻璃效果。我們也會探索如何讓圖示具備互動性，並運用在網頁或 App 專案中。 我們開始吧！ \--- 資源在這裡！👋： 🏃這是一個很棒的教學，能學到更多在 Spline 中製作互動的方法： 🏗️ 在 Spline 中打造作品的更多方式： 💻 為你的網站加入 3D： 💖 為 iOS 專案加入 3D： \--- 在 探索更多優秀創作者與作品 #MadeInSpline ## 你將學到 1. [0:003D 圖示簡介](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=0s) 2. [0:21將 2D 轉換成 3D](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=21s) 3. [1:00使用鋼筆工具與形狀](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=60s) 4. [2:31匯入並轉換 SVG](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=151s) 5. [4:38加上材質打造 3D 效果](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=278s) 6. [14:04為圖示加入簡單的互動](https://www.youtube.com/watch?v=yfNvUjxcG7M&t=844s) ## 相關資源 - [Message Icon範本](https://app.spline.design/academy/tutorials/create-3d-icons-from-scratch?redirect-duplicate-template-uuid=806351b2-5c4c-4587-b4e1-eaeb698c5445&is-2d-file=false) - [Pen Tool文件](https://docs.spline.design/designing-in-3-d/pen-tool) - [Extruding 2D objects in 3D文件](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d) - [Materials & Shading文件](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading) ## 概覽 - Spline 3D - 16 分鐘 - 入門 ## 所屬課程 - [Spline 101｜打造你的第一個互動場景](https://spline.design/zh-hant/academy/collections/spline-101-build-your-first-interactive-scene/create-3d-icons-from-scratch) ## 相關教學 [所有教學](https://spline.design/zh-hant/academy/tutorials) [開始在 Spline 中製作 3DSpline 3D入門26 分鐘](https://spline.design/zh-hant/academy/tutorials/get-started-with-3d-in-spline)[如何把 Spline 的 3D 場景嵌入 ShopifySpline 3D入門9 分鐘](https://spline.design/zh-hant/academy/tutorials/how-to-embed-3d-scenes-from-spline-into-shopify)[如何為 3D 場景設定即時 API 與 WebhookSpline 3D進階16 分鐘](https://spline.design/zh-hant/academy/tutorials/how-to-set-up-real-time-apis-and-webhooks-for-your-3d-scenes) [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.