Клиент заходит на страницу дивана, видит плоскую фотографию и уходит. А если бы он мог покрутить модель, заглянуть под углы, приблизить ткань — конверсия растёт. Мы внедряем 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 1024 Draco-сжатие геометрии уменьшает размер в 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+ интернет-магазинов. Гарантируем совместимость с вашей версией Битрикс и помощь на всех этапах.