Paano ginamit ng Koji Studio ang Spline para maghatid ng 3D product showcase

Nang magsimula ang Ori, isang medical technology company, na maglunsad ng website para sa bago nitong 3D dental scanner, malinaw ang hamon: paano mo ipaparating ang precision at inobasyon ng isang pisikal na device sa paraang kasing-makabago ang dating online?

Gustong dalhin ng kumpanya sa market ang bago nilang Ori Intraoral Scanner. Isang 3D dental scanning device na ginawa para tulungan ang mga dentista na kumuha ng napakatumpak at real-time na digital model ng ngipin ng mga pasyente.

Sa hangaring lumampas sa mga static na larawan at video para ipakita sa kanilang mga customer ang teknikal na pag-unlad ng produktong ito, kinuha nila ang KOJI Agency bilang creative team para sa product launch.

Nagpasya ang team ng KOJI na gamitin ang Spline integration sa loob ng Webflow para bumuo ng interactive na 3D digital experience na nagpaparamdam sa scanner na kasing-totoo sa web gaya ng nasa kamay ng dentista.

Isang full-stack na design team na yumayakap sa mga bagong tool

Kasama sa team ng KOJI Agency sa likod ng web presence ng Ori Scan sina Pavel, Slava, Nikita at Liza, na bawat isa ay bihasang designer na marami nang nagawang project para sa mga client.

May mahigit 20 taon sa branding, identity at digital experiences, nakagawa na sila ng lahat mula sa mga modular na advertising system hanggang sa mga immersive na narrative site.

Ang lakas nila ay ang pagiging "full-stack designer" — pinagsasama ang product thinking, visual design, interaction at code.

Lagi kaming nagre-research, laging naghahanap ng mga bagong tool. Ganoon namin natagpuan ang Spline.

Paggamit ng Spline para buksan ang interactivity

Hindi lang basta isa pang website ng medical product ang gusto ng pamunuan ng Ori Scan. Gusto nila ng experience na mamumukod-tangi sa kanilang audience ng mga dentista at healthcare professional.

Nakita ng team ng KOJI ang interactive 3D bilang pinakamainam na medium para itampok ang inobasyon ng scanner, at sinadya rin ang pagpili sa Spline.

Alam ng team na kailangan nila ang flexibility para mabilis mag-iterate, mag-optimize ng performance, at ipakita nang interactive ang mga product design ng scanner sa iba't ibang device.

Nasa lahat ng dako ng design community ang Spline. Ang project na ito ang perpektong pagkakataon para sa wakas ay magamit ito, at lalong pinadali ng maayos na integration sa Webflow ang desisyon.

Ang proseso ng design: Mula CAD at polygon optimization hanggang sa isang pulidong web experience

Nagsimula ang proseso sa mga teknikal na CAD file ng Ori Scan, na pinino at in-optimize ng agency bago dalhin sa Spline.

Iterative ang workflow — binabalanse ang polygon count, mga material at lighting para matiyak ang balanse sa pagitan ng kaakit-akit na resulta at maayos na performance sa web.

Pinagsama ng Spline ang teknikal at malikhaing bahagi ng proseso. Nagbigay ang mga performance tool nito sa team ng malinaw na insight sa model optimization, kaya naging maayos ang integration sa iba't ibang device. Pinasimple ng event system ang pag-set up ng interactive na galaw, habang tumulong ang maraming-gamit na material at lighting tool na pinuhin ang itsura ng produkto para magmukha itong pulido at makatotohanan sa web.

Isa sa mga namumukod-tanging detalye? Ang 3D model ng ngipin. Para ipakita ang scanner sa aksyon, nag-model ang team ng mukhang natural na ngipin sa Spline, isang mahalagang detalye na nagparamdam na totoo ang demo.

Dahil sa atensyong ito sa detalye, umangat ang demo nang lampas sa isang teknikal na showcase. Sa pagsasama ng realismo at interactivity, gumawa ang team ng kuwento ng produkto na totoo, engaging at direktang konektado sa kung paano talaga gagamitin ng mga dentista ang scanner.

Masaya ito pero kritikal din. Dahil ang layunin ng scanner ay mag-scan ng ngipin, kailangang mukhang natural at natural ang pakiramdam ng 3D model.

Pag-integrate sa Webflow

Umasa ang team ng KOJI sa Spline para bigyang-buhay ang produkto ng Ori Scan, at sa native na Webflow integration ng Spline para maayos na maipatupad ang mga 3D asset sa website.

Dahil dito, naging posible ang pagsasama ng mga scroll-based na animation at interactive 3D, kaya napapaikot at natutuklas ng mga bisita ang scanner habang nag-i-scroll sila sa page.

Napakasimple at napakabilis nito. Mababa ang learning curve, kahit mga junior designer ay kayang sumali at mag-integrate ng 3D sa Webflow.

Bakit mahalaga ang interactivity

Para sa Ori Scan, hindi lang tungkol sa aesthetics ang isang interactive na 3D product showcase. Tungkol ito sa linaw at epekto. Sa pagpapahintulot sa mga customer na mag-scroll sa produkto, paikutin ito at tuklasin ang mga feature nito sa konteksto, gumawa sila ng experience na higit pa sa kayang abutin ng static na litrato o video.

Binabago ng interactivity ang lahat. Nagpaparamdam ito na totoo ang produkto. At higit sa lahat, tinutulungan nito ang client na ikuwento ang kanilang kuwento sa paraang makabago ang dating.

Magsimula sa Spline

Patuloy na nag-eeksperimento ang team ng KOJI sa Spline. Para sa kanila, minarkahan ng project na ito ang simula ng bagong kabanata kung saan ang 3D at interactive design ay hindi lang “magandang mayroon” kundi mahalaga sa pagkukuwento tungkol sa produkto.

Isa itong kahanga-hangang halimbawa kung paano magagawa ng interactivity na isang experience na parang totoo ang digital product design.

Kausapin ang sales