Налаштування 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.
Оптимізація розміру моделей
Необроблені 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']);
// Рендер вьювера
}