Фото не передають, як виглядає товар зі всіх боків
Робимо 3D-модель, яку можна крутити й наближати. Додаємо перемикання кольорів і матеріалів, щоб клієнт сам обрав варіант до замовлення.
3D на сайті, який показує товар і не гальмує телефон
Робимо інтерактивні 3D-сцени для сайту: товар можна крутити, наближати, міняти колір. Працюємо на Three.js (бібліотека для 3D у браузері) і WebGL (технологія, що малює 3D на відеокарті пристрою). Сцена вбудовується в сайт, який ми робимо або вже маємо, і допомагає продавати: людина краще розуміє товар і довше залишається на сторінці.
Кошторис і строки після брифу
Кому підходить
- Виробники й магазини, чий товар складно показати на фото: меблі, техніка, прикраси, обладнання
- Компанії, що продають за конфігурацією: колір, матеріал, комплектація
- Бренди, яким потрібна виразна головна сторінка або презентація продукту
- Забудовники та архітектори, які показують об'єкт у 3D
Які задачі вирішуємо
Бачив 3D-сайти, але вони вантажаться вічність і гріють телефон
Оптимізуємо моделі й текстури, стискаємо файли, ставимо легку версію для слабких пристроїв. Перевіряємо на реальних телефонах, а не лише на потужному ноутбуці.
Не знаю, звідки брати 3D-модель
Якщо є креслення або CAD-файли, готуємо модель із них. Якщо немає, моделюємо за фото й розмірами. У кошторисі це окрема позиція, тож ви бачите її вартість заздалегідь.
Боюся, що 3D зіпсує SEO та зручність сайту
3D завантажується після основного вмісту, текст і заголовки лишаються звичайними для пошуку. Для кожної сцени є запасний варіант: статичне зображення.
Що входить у роботу
- Підготовка або створення 3D-моделі (glTF, формат 3D для вебу) і стиснення (Draco/KTX2)
- Сцена на Three.js: камера, освітлення, тіні, середовище
- Керування: обертання, наближення, підказки для дотику на телефоні
- Конфігуратор: зміна кольору, матеріалу, частин виробу
- Анімація за прокруткою сторінки або за кліком
- Вбудовування в існуючий сайт або в новий, який ми робимо
- Запасний варіант без 3D для слабких пристроїв і браузерів
- Перевірка швидкості та тестування на Android, iPhone і десктопі
- Передача вихідного коду, моделей і доступів вам
Оберіть обсяг роботи
Пакет допомагає описати задачу. Кошторис і строки погоджуємо після брифу та уточнення вимог.
01
3D-вітрина
Один товар, який треба показати з усіх боків
- Одна готова 3D-модель у вашому розпорядженні або проста модель від нас
- Обертання й наближення
- Освітлення та тло під ваш бренд
- Вбудовування на одну сторінку
- Запасне зображення для слабких пристроїв
02
Конфігуратор
Магазини й виробники, що продають за варіантами
- Одна модель із кількома змінними частинами
- Перемикання кольорів і матеріалів
- Кнопка «Замовити» зі збереженням вибраного варіанта
- Оптимізація під мобільні
- Тестування на реальних пристроях
03
3D-досвід
Бренди з презентаційним сайтом або запуском продукту
- Кілька сцен з анімацією за прокруткою
- Моделювання за вашими матеріалами
- Ефекти, шейдери (програми для візуальних ефектів)
- Інтеграція в сайт на ваш вибір
- Пілот із виміряною метою до повного запуску
Як працюємо
Бриф і вимоги
Ви описуєте задачу й поточний процес. Уточнюємо вимоги, обираємо перший етап і готуємо кошторис.
Матеріали та модель
Збираємо креслення, фото, CAD-файли, бренд-кольори. Готуємо або оптимізуємо 3D-модель і показуємо її вам до розробки сцени.
Пілотна сцена
Робимо одну робочу сцену на реальному сайті. Ви можете покрутити її на своєму телефоні й дати правки.
Розробка та оптимізація
Доробляємо повний обсяг, стискаємо файли, перевіряємо швидкість і запасні варіанти. Оплата йде етапами.
Запуск і передача
Публікуємо, перевіряємо мету пілота. Код, моделі й доступи вже ваші, ми їх нікуди не забираємо.
Межі роботи
- Не обіцяємо, що 3D сам збільшить продажі. Ми ставимо вимірювану ціль у пілоті й дивимося на дані.
- Не обіцяємо однаково плавну роботу на дуже старих телефонах. Для них буде легка версія або статичне зображення.
- Не робимо фільмову 3D-графіку чи ігри. Наша робота: легка 3D-сцена для сайту, яка швидко відкривається в браузері.
Часті питання
Що краще: Three.js чи готовий 3D-плеєр?
Готовий плеєр підходить, якщо треба просто крутити одну модель. Three.js потрібен, коли є конфігуратор, власна анімація, ефекти або тісна інтеграція з сайтом. Скажемо чесно, якщо вам вистачить простішого варіанта.
Чи треба мені мати готову 3D-модель?
Ні, але з нею дешевше й швидше. Якщо є CAD-файли або креслення, ми підготуємо модель для вебу. Якщо немає, змоделюємо за фото й розмірами, це окрема позиція в кошторисі.
Чи не буде сайт повільним?
Ми ставимо ліміт ваги сцени ще на старті й стискаємо моделі та текстури. 3D вантажиться після основного вмісту. Швидкість перевіряємо на реальних телефонах до запуску.
Працює на iPhone й Android?
Так, WebGL підтримують сучасні браузери на обох платформах. Для слабких пристроїв робимо запасний варіант. Перед здачею тестуємо на кількох реальних моделях.
Чи можна додати 3D до вже існуючого сайту?
Зазвичай так: сцена вбудовується як окремий блок на WordPress, Webflow, Shopify чи власному коді. Перед початком дивимось, як побудований ваш сайт, і кажемо, чи є обмеження.
Кому належить код і моделі?
Передачу коду, матеріалів і доступів погоджуємо до старту та фіксуємо в умовах роботи. Окремо описуємо сторонні ліцензії й сервіси, якщо вони потрібні.
Почнемо з вашої задачі
Опишіть бізнес, бажаний результат і поточний процес. Після брифу уточнимо вимоги та підготуємо кошторис.