Koji Studio 如何用 Spline 打造 3D 產品展示

當醫療科技公司 Ori 準備為旗下新的 3D 牙科掃描器推出網站時，挑戰很明確：要如何在網路上，以同樣創新的方式傳達一台實體裝置的精準與創新？

這家公司正準備將新的 Ori 口內掃描器推向市場。這是一款 3D 牙科掃描裝置，能幫助牙醫即時擷取病患牙齒的高精準數位模型。

為了突破靜態圖片和影片，向客戶展現這項產品的技術進展，他們找上 KOJI Agency 擔任產品發表的創意團隊。

KOJI 團隊決定運用 Spline 在 Webflow 中的整合，打造一個互動式 3D 數位體驗，讓掃描器在網頁上就像握在牙醫手中一樣真實可觸。

擁抱新工具的全端設計團隊

打造 Ori Scan 網路形象的 KOJI Agency 團隊，成員包括 Pavel、Slava、Nikita 和 Liza，每位都是經驗豐富、做過許多客戶專案的設計師。

他們在品牌、識別和數位體驗領域累積超過 20 年經驗，打造過從模組化廣告系統到沉浸式敘事網站的各種作品。

他們的強項在於身為「全端設計師」：融合產品思維、視覺設計、互動和程式碼。

我們一直在研究，一直在尋找新工具。我們就是這樣找到 Spline 的。

運用 Spline 解鎖互動性

Ori Scan 的領導團隊要的不只是另一個醫療產品網站，而是一個能在牙醫和醫療專業人士眼中脫穎而出的體驗。

KOJI 團隊認為互動式 3D 是凸顯掃描器創新的最佳媒介，而選擇 Spline 也同樣是經過深思熟慮的決定。

團隊知道，他們需要能快速迭代、最佳化效能，並在各種裝置上以互動方式呈現掃描器產品設計的彈性。

Spline 在設計社群中隨處可見。這個專案正是終於能使用它的絕佳機會，而它與 Webflow 的無縫整合，讓這個決定更加容易。

設計流程：從 CAD 與多邊形最佳化，到精緻的網頁體驗

流程從 Ori Scan 的技術 CAD 檔案開始，團隊先加以精修和最佳化，再匯入 Spline。

這是一個反覆迭代的工作流程：在多邊形數量、材質和光線之間取得平衡，確保視覺效果吸引人，同時在網頁上流暢運作。

Spline 將流程中技術與創意的兩端結合在一起。它的效能工具讓團隊清楚掌握模型最佳化的狀況，確保在各種裝置上順暢整合。事件系統讓設定互動動態變得簡單，而多功能的材質與燈光工具則幫助打磨產品外觀，讓它在網頁上顯得精緻又逼真。

最突出的細節之一？牙齒的 3D 模型。為了展示掃描器的實際運作，團隊在 Spline 中建模了外觀自然的牙齒，這個關鍵的細節讓示範顯得真實可信。

這份對細節的用心，讓示範不只是技術展示。透過結合真實感與互動性，團隊打造出一個真實、引人入勝，並與牙醫實際使用掃描器的方式直接相關的產品故事。

這很有趣，但也非常關鍵。既然掃描器的用途是掃描牙齒，3D 模型就必須看起來、感覺起來都很自然。

與 Webflow 整合

KOJI 團隊依靠 Spline 讓 Ori Scan 產品活起來，並透過 Spline 原生的 Webflow 整合，將 3D 素材無縫放進網站。

這讓隨捲動觸發的動畫能與互動式 3D 結合，訪客在瀏覽頁面時就能旋轉並探索掃描器。

它非常簡單又快速。學習曲線很低，就連資淺的設計師也能上手，把 3D 整合進 Webflow。

為什麼互動性很重要

對 Ori Scan 來說，互動式 3D 產品展示不只關乎美感，更關乎清晰度與影響力。讓客戶捲動瀏覽產品、旋轉它，並在情境中探索它的功能，他們打造出遠超過靜態攝影或影片所能達到的體驗。

互動性改變了一切。它讓產品感覺真實。更重要的是，它幫助客戶以充滿創新感的方式講述他們的故事。

開始使用 Spline

KOJI 團隊持續用 Spline 進行實驗。對他們來說，這個專案開啟了新的篇章：3D 與互動設計不再只是「有了更好」，而是講述產品故事不可或缺的一環。

這是一個視覺上令人驚豔的範例，展示了互動性如何將數位產品設計轉化為真實可感的體驗。

聯絡業務