Интеграция AR-примерки товаров на 1С-Битрикс

Интеграция AR-примерки товаров на 1С-Битрикс

Конверсия в категории «одежда» и «очки» на мобильном трафике страдает от одной проблемы: покупатель не может представить, как вещь будет выглядеть на нём. AR-примерка решает это — камера смартфона накладывает модель товара в реальном времени. Интеграция такого функционала в Битрикс — это не сложный проект, если правильно выбрать поставщика SDK и понять, как связать данные каталога с 3D-моделями.

Выбор SDK для AR-примерки

Существует несколько подходов:

WebXR + Three.js — браузерный, не требует приложения. Работает в Chrome на Android (iOS — Safari с ограничениями). 3D-модели в формате .glb или .usdz. Подходит для мебели, очков, крупных предметов.

Snap Camera Kit / Meta Spark — SDK для создания AR-масок/эффектов. Интеграция через iframe или нативное приложение. Хорошо работает для украшений, очков, аксессуаров.

Banuba / Visage Technologies — SDK для примерки очков, макияжа, причёсок. Требует лицензии, даёт точное наложение по точкам лица. Есть REST API для передачи параметров модели.

Fit Analytics / True Fit — специализированные сервисы для одежды с рекомендацией размера на основе параметров пользователя. Не AR в строгом смысле, но решают ту же задачу снижения возвратов.

Архитектура интеграции с Битрикс

Суть интеграции — передать AR-виджету идентификатор и параметры товара из каталога Битрикс. Схема:

Карточка товара (catalog.element)
  → JavaScript передаёт product_id и SKU в AR-виджет
    → Виджет запрашивает 3D-модель по product_id
      → /api/ar/model/{product_id} (эндпоинт Битрикс)
        → Возвращает URL файла .glb/.usdz из b_file
          → WebXR/SDK отображает модель через камеру

Хранение 3D-моделей в каталоге

Для хранения 3D-моделей создайте свойство инфоблока:

• Код: AR_MODEL_GLB
• Тип: Файл
• Формат: .glb (для Android/WebXR)

И второе свойство для iOS:

• Код: AR_MODEL_USDZ
• Тип: Файл
• Формат: .usdz

Загрузка — стандартная через административный интерфейс или массовая через скрипт импорта (CFile::SaveFile()).

API-эндпоинт для AR-виджета

Создайте обработчик в Битрикс:

// /local/api/ar/model.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$productId = (int)$_GET['product_id'];
if (!$productId) { http_response_code(400); exit; }

\Bitrix\Main\Loader::includeModule('iblock');

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props   = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']);

$glbFile  = $props['AR_MODEL_GLB']['VALUE']  ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE'])  : null;
$usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null;

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad');

header('Content-Type: application/json');
echo json_encode([
    'model_url'   => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile),
    'product_id'  => $productId,
    'ar_supported' => (bool)$glbFile,
]);

Подключение WebXR в шаблоне карточки товара

В шаблоне компонента catalog.element (или result_modifier.php) добавьте:

// Проверяем поддержку WebXR
if ('xr' in navigator && $arModelUrl) {
    const arButton = document.createElement('a');
    arButton.rel    = 'ar';
    arButton.href   = $arModelUrl; // URL файла .usdz для iOS Quick Look

    // Для Android/WebXR — используем <model-viewer>
    const modelViewer = document.createElement('model-viewer');
    modelViewer.setAttribute('src', $arModelUrlGlb);
    modelViewer.setAttribute('ar', '');
    modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
    modelViewer.setAttribute('camera-controls', '');
    document.getElementById('ar-container').appendChild(modelViewer);
}

Библиотека @google/model-viewer (подключается через CDN) обеспечивает поддержку всех трёх AR-режимов: WebXR (Chrome Android), Scene Viewer (Android нативный), Quick Look (iOS Safari).

Интеграция через внешние SDK (Banuba, Snap)

Если используете сторонний SDK с лицензией:

// Передаём параметры товара в SDK
window.BANUBA_SDK.init({
    clientToken: 'YOUR_TOKEN',
    onReady: () => {
        window.BANUBA_SDK.tryOn({
            productId: <?= $arResult['ID'] ?>,
            sku:       '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>',
            category:  'eyewear', // glasses, rings, watches
        });
    }
});

SDK сам запрашивает модель со своих серверов по productId — для этого нужно предварительно загрузить модели в их CDN через их API или административную панель.

Управление моделями: массовая загрузка

Для каталога 500+ товаров с AR-моделями нужен скрипт импорта:

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file

foreach ($csv as $row) {
    $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']);
    if (!$element) continue;

    $glbId  = \CFile::SaveFile(['name' => $row['glb_file'],  'tmp_name' => '/models/' . $row['glb_file'],  ...], 'catalog_ar');
    $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar');

    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId,  'AR_MODEL_GLB');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ');
}

Аналитика использования AR

Подключите отслеживание: сколько пользователей запустили AR-примерку, как это влияет на конверсию.

// При запуске AR-примерки
modelViewer.addEventListener('ar-status', (event) => {
    if (event.detail.status === 'session-started') {
        ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', {
            product_id: productId,
            category:   productCategory,
        });
    }
});

Сравниваете конверсию сессий с AR-примеркой и без — это основной KPI, который обосновывает затраты на подготовку 3D-моделей.

Состав работ и сроки

Основная трудоёмкость проекта — создание 3D-моделей товаров. Качественная модель в .glb стоит 20–80 USD за позицию у специализированных студий. Интеграция кода без подготовки моделей занимает 3–5 недель.