Як Koji Studio створила 3D-презентацію продукту за допомогою Spline

Коли медтехнологічна компанія Ori вирішила запустити сайт для свого нового стоматологічного 3D-сканера, виклик був очевидний: як передати точність та інноваційність фізичного пристрою так, щоб онлайн це відчувалося так само новаторськи?

Компанія виводила на ринок свій новий пристрій Ori Intraoral Scanner — стоматологічний 3D-сканер, що допомагає стоматологам отримувати високоточні цифрові моделі зубів пацієнтів у реальному часі.

Прагнучи вийти за межі статичних зображень і відео, щоб показати клієнтам технічну досконалість продукту, вони обрали агенцію KOJI творчою командою для запуску продукту.

Команда KOJI вирішила скористатися інтеграцією Spline у Webflow, щоб створити інтерактивну 3D-презентацію, у якій сканер у вебі здається таким самим реальним, як у руці стоматолога.

Дизайн-команда повного циклу, відкрита до нових інструментів

До команди агенції KOJI, що створила вебприсутність Ori Scan, входили Павел, Слава, Нікіта й Ліза — досвідчені дизайнери з безліччю клієнтських проєктів за плечима.

Маючи понад 20 років досвіду в брендингу, айдентиці й цифровому досвіді, вони створювали все — від модульних рекламних систем до захопливих наративних сайтів.

Їхня сила в тому, що вони «дизайнери повного циклу», які поєднують продуктове мислення, візуальний дизайн, взаємодію та код.

Ми постійно досліджуємо, постійно шукаємо нові інструменти. Так ми й прийшли до Spline.

Spline відкриває інтерактивність

Керівництво Ori Scan не хотіло ще одного сайту медичного продукту. Їм потрібен був сайт, який вирізнятиметься для їхньої аудиторії стоматологів і медичних фахівців.

Команда KOJI вважала інтерактивне 3D найкращим засобом, щоб підкреслити інноваційність сканера, і вибір Spline був так само свідомим.

Команда знала, що їй потрібна гнучкість, щоб швидко ітерувати, оптимізувати продуктивність та інтерактивно показувати дизайн сканера на всіх пристроях.

Spline був усюди в дизайн-спільноті. Цей проєкт став ідеальною нагодою нарешті ним скористатися, а безшовна інтеграція з Webflow зробила рішення ще простішим.

Процес дизайну: від CAD і оптимізації полігонів до відшліфованого вебдосвіду

Процес почався з технічних CAD-файлів Ori Scan, які агенція доопрацювала й оптимізувала, перш ніж перенести в Spline.

Робота йшла ітеративно: команда балансувала кількість полігонів, матеріали й освітлення, щоб досягти рівноваги між візуально привабливим результатом і плавною роботою у вебі.

Spline поєднав технічну й творчу сторони процесу. Його інструменти продуктивності дали команді чітке розуміння оптимізації моделі, забезпечивши плавну інтеграцію на всіх пристроях. Система подій спростила налаштування інтерактивного руху, а універсальні інструменти матеріалів і освітлення допомогли відшліфувати вигляд продукту, щоб у вебі він виглядав досконало й реалістично.

Одна з найпомітніших деталей? 3D-модель зубів. Щоб показати сканер у дії, команда змоделювала в Spline природні на вигляд зуби — і цей важливий штрих зробив демо переконливим.

Така увага до деталей підняла демо вище за технічну презентацію. Поєднавши реалістичність з інтерактивністю, команда створила історію продукту, що відчувається правдивою, захопливою й безпосередньо пов’язаною з тим, як стоматологи насправді користуватимуться сканером.

Це було весело, але й критично важливо. Оскільки сканер призначений для сканування зубів, 3D-модель мала виглядати й відчуватися природно.

Інтеграція з Webflow

Команда KOJI покладалася на Spline, щоб оживити продукт Ori Scan, і на нативну інтеграцію Spline з Webflow, щоб безшовно вбудувати 3D-ресурси в сайт.

Так вдалося поєднати анімації прокручування з інтерактивним 3D, дозволивши відвідувачам обертати й роздивлятися сканер, рухаючись сторінкою.

Це дуже просто й швидко. Поріг входу низький — навіть молодші дизайнери можуть долучитися й інтегрувати 3D у Webflow.

Чому інтерактивність важлива

Для Ori Scan інтерактивна 3D-презентація продукту була не лише про естетику. Ішлося про ясність і вплив. Давши клієнтам змогу прокручувати сторінку, обертати продукт і досліджувати функції в контексті, вони створили враження, що виходить далеко за межі можливостей статичних фото чи відео.

Інтерактивність змінює все. Завдяки їй продукт відчувається справжнім. А головне — вона допомагає клієнту розповісти свою історію так, що це відчувається новаторським.

Почніть працювати зі Spline

Команда KOJI продовжує експериментувати зі Spline. Для неї цей проєкт відкрив новий розділ, де 3D та інтерактивний дизайн — не просто «приємне доповнення», а необхідність для розповіді про продукт.

Це візуально приголомшливий приклад того, як інтерактивність може перетворити дизайн цифрового продукту на враження, що здається справжнім.

Зв’язатися з відділом продажів