# Koji Studio 如何用 Spline 打造 3D 產品展示 - Spline customers (https://spline.design/zh-hant/customers/koji-studio) > Koji Studio 運用 Spline，將靜態的產品視覺轉化為隨捲動呈現的 3D 產品展示，帶來更吸引人、更令人難忘的體驗，凸顯客戶的創新與工藝。 [客戶](https://spline.design/zh-hant/customers) 2025年8月21日 · 客戶案例 · KOJI # Koji Studio 如何用 Spline 打造 3D 產品展示 Koji Studio 運用 Spline，將靜態的產品視覺轉化為隨捲動呈現的 3D 產品展示，帶來更吸引人、更令人難忘的體驗，凸顯客戶的創新與工藝。 當醫療科技公司 Ori 準備為旗下新的 3D 牙科掃描器推出網站時，挑戰很明確：要如何在網路上，以同樣創新的方式傳達一台實體裝置的精準與創新？ 這家公司正準備將新的 Ori 口內掃描器推向市場。這是一款 3D 牙科掃描裝置，能幫助牙醫即時擷取病患牙齒的高精準數位模型。 為了突破靜態圖片和影片，向客戶展現這項產品的技術進展，他們找上 KOJI Agency 擔任產品發表的創意團隊。 KOJI 團隊決定運用 Spline 在 Webflow 中的整合，打造一個互動式 3D 數位體驗，讓掃描器在網頁上就像握在牙醫手中一樣真實可觸。 Ori Scan 隨捲動呈現的互動式 3D 網站 ## 擁抱新工具的全端設計團隊 打造 Ori Scan 網路形象的 KOJI Agency 團隊，成員包括 Pavel、Slava、Nikita 和 Liza，每位都是經驗豐富、做過許多客戶專案的設計師。 他們在品牌、識別和數位體驗領域累積超過 20 年經驗，打造過從模組化廣告系統到沉浸式敘事網站的各種作品。 他們的強項在於身為「全端設計師」：融合產品思維、視覺設計、互動和程式碼。 > 我們一直在研究，一直在尋找新工具。我們就是這樣找到 Spline 的。 **Slava Sheykin**, KOJI 全端設計師 ## 運用 Spline 解鎖互動性 Ori Scan 的領導團隊要的不只是另一個醫療產品網站，而是一個能在牙醫和醫療專業人士眼中脫穎而出的體驗。 KOJI 團隊認為互動式 3D 是凸顯掃描器創新的最佳媒介，而選擇 Spline 也同樣是經過深思熟慮的決定。 網站訪客在瀏覽頁面時旋轉並探索掃描器 團隊知道，他們需要能快速迭代、最佳化效能，並在各種裝置上以互動方式呈現掃描器產品設計的彈性。 > Spline 在設計社群中隨處可見。這個專案正是終於能使用它的絕佳機會，而它與 Webflow 的無縫整合，讓這個決定更加容易。 **Pavel Dergachev**, KOJI 創辦人暨創意總監 ## 設計流程：從 CAD 與多邊形最佳化，到精緻的網頁體驗 流程從 Ori Scan 的技術 CAD 檔案開始，團隊先加以精修和最佳化，再匯入 Spline。 這是一個反覆迭代的工作流程：在多邊形數量、材質和光線之間取得平衡，確保視覺效果吸引人，同時在網頁上流暢運作。 Spline 將流程中技術與創意的兩端結合在一起。它的效能工具讓團隊清楚掌握模型最佳化的狀況，確保在各種裝置上順暢整合。事件系統讓設定互動動態變得簡單，而多功能的材質與燈光工具則幫助打磨產品外觀，讓它在網頁上顯得精緻又逼真。 3D 模型與最終的行動版實作 最突出的細節之一？牙齒的 3D 模型。為了展示掃描器的實際運作，團隊在 Spline 中建模了外觀自然的牙齒，這個關鍵的細節讓示範顯得真實可信。 這份對細節的用心，讓示範不只是技術展示。透過結合真實感與互動性，團隊打造出一個真實、引人入勝，並與牙醫實際使用掃描器的方式直接相關的產品故事。 > 這很有趣，但也非常關鍵。既然掃描器的用途是掃描牙齒，3D 模型就必須看起來、感覺起來都很自然。 **Liza Grin**, KOJI 數位製作人 由上到下：最終實作、原始 3D 模型與初稿 ## 與 Webflow 整合 KOJI 團隊依靠 Spline 讓 Ori Scan 產品活起來，並透過 Spline 原生的 Webflow 整合，將 3D 素材無縫放進網站。 這讓隨捲動觸發的動畫能與互動式 3D 結合，訪客在瀏覽頁面時就能旋轉並探索掃描器。 > 它非常簡單又快速。學習曲線很低，就連資淺的設計師也能上手，把 3D 整合進 Webflow。 Spline 原生的 Webflow 整合 ## 為什麼互動性很重要 對 Ori Scan 來說，互動式 3D 產品展示不只關乎美感，更關乎清晰度與影響力。讓客戶捲動瀏覽產品、旋轉它，並在情境中探索它的功能，他們打造出遠超過靜態攝影或影片所能達到的體驗。 > 互動性改變了一切。它讓產品感覺真實。更重要的是，它幫助客戶以充滿創新感的方式講述他們的故事。 ## 開始使用 Spline KOJI 團隊持續用 Spline 進行實驗。對他們來說，這個專案開啟了新的篇章：3D 與互動設計不再只是「有了更好」，而是講述產品故事不可或缺的一環。 這是一個視覺上令人驚豔的範例，展示了互動性如何將數位產品設計轉化為真實可感的體驗。 [聯絡業務](https://spline.design/zh-hant/enterprise) ## 更多客戶案例 [2026年4月13日 · 客戶案例Lynksen 如何用 Spline 讓複雜的 B2B 平台網站活起來](https://spline.design/zh-hant/customers/lynksen)[2026年3月2日 · 客戶案例Onyx Coffee Lab 如何為電商打造互動式 3D](https://spline.design/zh-hant/customers/onyx-coffee-lab)[2026年2月24日 · 客戶案例Hermetica 如何以 3D 設計提升金融科技品牌](https://spline.design/zh-hant/customers/hermetica) [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.