Настройка 3D-просмотра товаров на 1С-Битрикс

Настройка 3D-просмотра товаров на 1С-Битрикс

360-фото — это последовательность снимков. 3D-просмотр — это трёхмерная модель, которую можно повернуть под любым углом, приблизить, рассмотреть детали. Для интернет-магазина мебели, ювелирных украшений или техники разница существенная.

Форматы 3D-моделей для веба

Web-совместимые форматы 3D: glTF/glb — стандарт Khronos Group, наиболее поддерживаемый в браузерах; USDZ — формат Apple для AR на iOS; OBJ — старый текстовый формат, большой размер; FBX — для передачи в редакторы, не для веба напрямую.

Для сайта используется glb (бинарный glTF) — сочетает геометрию, материалы и текстуры в одном файле. Размер типичной glb-модели для простого товара — 500 КБ – 5 МБ.

Хранение 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);

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>

Минимальный вьювер:

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();

Модель-вьювер как альтернатива

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.

Оптимизация размера моделей

Необработанные 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 КБ.

Интеграция в шаблон карточки товара

В шаблоне компонента bitrix:catalog.element добавляется контейнер и условная логика: если у товара есть свойство MODEL_3D — показывать 3D-вьювер вместо или рядом с основной фотографией:

if (!empty($arResult['PROPERTIES']['MODEL_3D']['VALUE'])) {
    $modelUrl = \CFile::GetPath($arResult['PROPERTIES']['MODEL_3D']['VALUE']);
    // Рендер вьювера
}