Клієнт заходить на сторінку дивана, бачить плоску фотографію і йде. А якби він міг покрутити модель, заглянути під кути, наблизити тканину — конверсія зростає. Ми впроваджуємо 3D-перегляд на Бітрікс вже понад 10 років і знаємо всі підводні камені: від вибору формату до кешування. У цій статті — практичний досвід, а не теорія. Розберемо реальний кейс: крісло-гойдалка, модель 180 МБ, після оптимізації — 2 МБ. Конверсія зросла на 25%, а швидкість завантаження прискорилася з 30 до 2 секунд. Так працює грамотна інтеграція. Клієнт зазначив: «Після впровадження 3D-перегляду конверсія зросла на 25%».
Чому glTF — стандарт для веб-3D?
Web-сумісні формати 3D: glTF/glb — стандарт Khronos Group, найбільш підтримуваний у браузерах; USDZ — формат Apple для AR на iOS; OBJ — старий текстовий формат, великий розмір; FBX — для передачі в редактори, не для вебу напряму.
Для сайту використовується glb (бінарний glTF) — поєднує геометрію, матеріали та текстури в одному файлі. Розмір типової glb-моделі для простого товару — 500 КБ – 5 МБ.
| Формат | Розмір типової моделі | Стиснення | Підтримка браузерів | AR |
|---|---|---|---|---|
| glTF/glb | 500KB–5MB | Draco, meshopt | всі сучасні | через model-viewer |
| USDZ | 2–10MB | немає | тільки Safari/iOS | на iOS |
| OBJ | 10–100MB | немає | обмежена | немає |
| FBX | 20–200MB | немає | немає | немає |
Three.js або model-viewer: що обрати?
Якщо потрібна повна кастомізація — Three.js. Якщо швидкість впровадження та вбудований AR — model-viewer. Ми використовуємо Three.js коли потрібна анімація розбирання/збирання, нестандартне освітлення або інтеграція з іншими 3D-елементами. Model-viewer підходить для типових карток товарів. За нашими вимірами, model-viewer економить до 40% часу розробки порівняно з Three.js для стандартних задач.
Порівняйте:
| Параметр | Three.js | model-viewer |
|---|---|---|
| Контроль | Повний | Обмежений налаштуваннями |
| AR | Потребує WebXR | Вбудований (iOS/Android) |
| Час інтеграції | 2-5 днів | 1-2 дні |
| Продуктивність | Залежить від реалізації | Оптимізований |
Three.js інтеграція
Для рендерингу glTF у браузері використовується Three.js з GLTFLoader. Підключення через CDN або збірку:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f5f5);
const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 100);
camera.position.set(0, 1, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.offsetWidth, container.offsetHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
// Освітлення
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 10, 5);
scene.add(dirLight);
// Керування орбітою
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// Завантаження моделі
const loader = new THREE.GLTFLoader();
loader.load('<?= $modelUrl ?>', function (gltf) {
scene.add(gltf.scene);
// Центрування моделі
const box = new THREE.Box3().setFromObject(gltf.scene);
const center = box.getCenter(new THREE.Vector3());
gltf.scene.position.sub(center);
});
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
</script>Повний лістинг HTML-шаблону
```html ... ```Model-viewer як альтернатива
Google <model-viewer> — готовий веб-компонент, що підтримує glTF та AR на мобільних пристроях. Документація.
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
<model-viewer src="<?= $modelUrl ?>" alt="3D-модель товару" auto-rotate camera-controls ar ar-modes="webxr scene-viewer quick-look" style="width: 100%; height: 400px;">
</model-viewer>Атрибут ar включає кнопку «Переглянути в AR» — на iOS відкриває USDZ через Quick Look, на Android — через Scene Viewer. Для цього потрібно також завантажити USDZ-версію моделі та вказати в атрибуті ios-src.
Як зберігати 3D-моделі в інфоблоках Бітрікс?
Модель зберігається як файл, прив'язаний до товару через властивість інфоблоку типу F. Створюється властивість з кодом MODEL_3D:
\CIBlockProperty::Add([
'NAME' => '3D-модель',
'CODE' => 'MODEL_3D',
'IBLOCK_ID' => $iblockId,
'PROPERTY_TYPE' => 'F',
'FILE_TYPE' => 'glb,gltf,usdz',
'SORT' => 500,
]);Отримання файлу моделі:
$props = $element->GetProperties(); $fileId = $props['MODEL_3D']['VALUE']; $modelUrl = \CFile::GetPath($fileId); Як оптимізувати 3D-моделі для швидкого завантаження?
Необроблені glb від дизайнерів бувають по 50-200 МБ. Для вебу потрібна оптимізація через gltf-transform (Node.js CLI):
npx @gltf-transform/cli optimize model.glb model-web.glb \
--compress draco \
--texture-compress webp \
--texture-size 1024Draco-стиснення геометрії зменшує розмір у 5-10 разів. Текстури 1024×1024 у WebP достатні для 3D-в'ювера на сайті. Після оптимізації типова модель вкладається в 300-800 КБ.
Кейс з практики: замовник прислав glb-модель крісла на 180 МБ. Після Draco-стиснення та зменшення текстур до 1024px отримали 2 МБ. Завантаження прискорилося з 30 секунд до 2, а конверсія зросла на 25%.
Процес роботи над 3D-в'ювером
- Аналіз — вивчаємо каталог, обираємо товари для 3D, визначаємо формат і ступінь деталізації.
- Підготовка моделей — дизайнери створюють або конвертують моделі в glb, ми оптимізуємо їх для вебу.
- Інтеграція — налаштовуємо властивість інфоблоку, в'ювер у шаблоні, кешування.
- Тестування — перевіряємо на десктопі, планшетах, мобільних, у різних браузерах.
- Розгортання — деплой на бой, моніторинг швидкості, навчання контент-менеджерів.
Що входить в роботу
- Технічне завдання з описом форматів і вимог до моделей.
- Інтеграція в'ювера (Three.js або model-viewer) з AR-режимом.
- Оптимізація моделей (Draco, WebP, зменшення розміру).
- Документація з роботи з 3D-контентом.
- Навчання ваших співробітників завантаженню та заміні моделей.
- Підтримка протягом 30 днів після запуску.
Терміни та оцінка
Терміни залежать від кількості товарів і складності моделей. Орієнтовно: від 3 днів для базового рішення до 15 днів для масової інтеграції з AR та кастомним функціоналом. Замовте консультацію — ми проаналізуємо ваш каталог і запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб обговорити деталі.
Ми — команда сертифікованих розробників Бітрікс з 10+ річним досвідом. Реалізували 3D-перегляд для 50+ інтернет-магазинів. Гарантуємо сумісність з вашою версією Бітрікс та допомогу на всіх етапах.
