Покажіть продукт, а не лише опишіть
3D на сайті виглядає ефектно, але це не прикраса заради прикраси. Найкраще воно працює, коли продукт важко уявити за фото: меблі в кімнаті, будинок, який ще не збудований, гаджет, який хочеться покрутити й роздивитися з усіх боків.
Водночас важка 3D-сцена легко робить сторінку повільною, а повільна сторінка втрачає відвідувачів і позиції в пошуку. Тому 3D має бути і красивим, і добре оптимізованим.
Нижче пояснюю, де 3D окуповується, як виглядає процес створення і які прийоми зберігають сторінку швидкою.
Де 3D справді допомагає
Для нерухомості й меблів 3D відповідає на головне питання клієнта — як це виглядатиме? Покупець може облетіти котедж або змінити колір дивана прямо на сторінці. Для косметики й гаджетів 3D-модель замінює десятки фото.
На таких сторінках відвідувачі проводять більше часу й ставлять менше базових питань, а в e-commerce це ще й зменшує повернення, бо люди знають, що купують.
Ніші, де 3D працює найкраще:
- Нерухомість і архітектура
- Меблі та інтер'єри
- Гаджети й косметика
- Конфігуратори товарів
Від Blender до браузера
Я створюю модель у Blender: геометрія, UV, матеріали й освітлення. Потім вона експортується в GLTF — стандартний формат для 3D у вебі — і стискається: Draco для геометрії та KTX2 для текстур.
На сайті сцена будується на Three.js: камера, світло, керування й анімації. Типова модель товару після стиснення важить 1–3 МБ замість десятків мегабайт вихідних файлів.
Як модель потрапляє на сторінку
- Blender — моделювання й матеріали
- GLTF — формат для вебу
- Draco та KTX2 — стиснення
- Three.js — інтерактивна сцена
Як зберегти сторінку швидкою
Головне правило: 3D-сцена не повинна блокувати сторінку. Спочатку відвідувач бачить статичне зображення-постер, а Three.js і модель завантажуються лише тоді, коли блок з'являється на екрані.
На телефонах я обмежую pixel ratio і кількість джерел світла, а коли користувач не взаємодіє, рендер зупиняється. У результаті сторінка зберігає хороші Core Web Vitals навіть з інтерактивною моделлю.
Прийоми, які я використовую завжди
- Спочатку постер, потім 3D
- Ліниве завантаження, коли блок видно
- Нижча якість на мобільних
- Пауза рендеру, коли нічого не змінюється