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

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

Three.js или model-viewer: что выбрать?

Если нужна полная кастомизация — Three.js. Если скорость внедрения и встроенная AR — model-viewer. Мы используем Three.js когда требуется анимация разборки/сборки, нестандартное освещение или интеграция с другими 3D-элементами. Model-viewer подходит для типовых карточек товаров. По нашим замерам, model-viewer экономит до 40% времени разработки по сравнению с Three.js для стандартных задач.

Сравните:

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>

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-вьювером

1. Анализ — изучаем каталог, выбираем товары для 3D, определяем формат и степень детализации.
2. Подготовка моделей — дизайнеры создают или конвертируют модели в glb, мы оптимизируем их для веба.
3. Интеграция — настраиваем свойство инфоблока, вьювер в шаблоне, кэширование.
4. Тестирование — проверяем на десктопе, планшетах, мобильных, в разных браузерах.
5. Развертывание — деплой на бой, мониторинг скорости, обучение контент-менеджеров.

Что входит в работу

• Техническое задание с описанием форматов и требований к моделям.
• Интеграция вьювера (Three.js или model-viewer) с AR-режимом.
• Оптимизация моделей (Draco, WebP, уменьшение размера).
• Документация по работе с 3D-контентом.
• Обучение ваших сотрудников загрузке и замене моделей.
• Поддержка в течение 30 дней после запуска.

Сроки и оценка

Сроки зависят от количества товаров и сложности моделей. Ориентировочно: от 3 дней для базового решения до 15 дней для массовой интеграции с AR и кастомным функционалом. Закажите консультацию — мы проанализируем ваш каталог и предложим оптимальное решение. Свяжитесь с нами, чтобы обсудить детали.

Мы — команда сертифицированных разработчиков Битрикс с 10+ летним опытом. Реализовали 3D-просмотр для 50+ интернет-магазинов. Гарантируем совместимость с вашей версией Битрикс и помощь на всех этапах.

Что включает профессиональная установка 1С-Битрикс

Мы начинаем установку 1С-Битрикс с проверки innodb_buffer_pool_size. Дефолтное значение MySQL (128 МБ) — приговор для интернет-магазина с каталогом на 10 000+ товаров. Мы ставим 70–80% от доступной RAM на выделенном сервере, 50% на VPS. Одна эта настройка ускоряет сайт в 2–3 раза по сравнению с дефолтом. Оценим ваш проект за один день — получите консультацию. Обращайтесь, чтобы заказать установку под ключ с гарантией производительности.

Как выбрать хостинг и редакцию для установки 1С-Битрикс?

BitrixVM — виртуальная машина с предустановленным стеком: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push‑сервер. Для VPS — лучший старт. Всё уже сконфигурировано под Битрикс, включая OPcache, логротацию и firewall. Управление через веб‑панель на порту 8890.

VPS/VDS — золотая середина. Минимальная конфигурация для среднего интернет‑магазина: 2 vCPU, 4 ГБ RAM, SSD. Оптимальная: 4 vCPU, 8 ГБ RAM. ОС: Ubuntu 22.04 или Debian 12. Если не BitrixVM — настраиваем стек вручную под задачу. Виртуальный хостинг — только для визиток и лендингов. Требования: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 МБ RAM, .htaccess. Хостинг‑партнёры 1С-Битрикс — гарантия совместимости. Выделенный сервер — для highload. Типичная архитектура: веб‑сервер отдельно, база данных отдельно, Redis/Memcached отдельно. На редакции «Энтерпрайз» — веб‑кластер с балансировщиком. Облако (Yandex Cloud, VK Cloud, Selectel) — когда нагрузка скачет: распродажи, сезонные пики. Автомасштабирование через Managed Kubernetes или просто вертикальное масштабирование VM.

Выбор редакции — не менее важный шаг. Частая ошибка: берут «Малый бизнес» для магазина, который через полгода вырастает до B2B с оптовыми ценами и тремя складами. Переход на «Бизнес» — доплата разницы, данные не теряются, но лучше предусмотреть заранее. Наши специалисты подберут редакцию под текущие задачи и с запасом на рост. Например, лицензия «Бизнес» (около 35 000 ₽) окупается за счёт мультисклада и обмена с 1С, а неправильный выбор приводит к потере до 30 000 ₽ ежемесячно на избыточных ресурсах.

Какие настройки сервера критичны для 1С-Битрикс?

Веб‑сервер и PHP

nginx как reverse proxy + Apache (mod_php) или nginx + PHP-FPM напрямую. Второй вариант экономит память — Apache не нужен. Но некоторые модули Битрикс используют .htaccess, поэтому для совместимости иногда оставляем Apache. Конфигурация nginx: fastcgi_read_timeout 300 — для долгих операций (импорт из 1С), client_max_body_size 1024m — загрузка больших файлов. Закрываем доступ к .settings.php, .settings_extra.php, bitrix/.settings.php — там пароли к базе. Rewrite‑правила из urlrewrite.php — Битрикс сам генерирует, но при nginx + PHP-FPM нужно продублировать. PHP 8.0–8.2 с расширениями: mbstring, curl, gd, xml, json, opcache, redis/memcached. Ключевые настройки php.ini: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

База данных и кэширование

MySQL/MariaDB. Ключевые параметры my.cnf: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — по количеству ядер CPU. Кодировка utf8mb4 обязательно, иначе эмодзи и спецсимволы ломаются. Redis предпочтительнее Memcached для Битрикс — поддерживает persistent connections и более надёжен. Настраиваем в .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

SSL, почта и cron

SSL — Let's Encrypt через certbot в 90% случаев. Редирект HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. В Битрикс переключаем на HTTPS в настройках главного модуля. Почта: отказываемся от mail() — подключаем SMTP (Яндекс.Почта для домена, Mail.ru для бизнеса). Обязательно настраиваем SPF, DKIM, DMARC. Без SPF письма уходят в спам. Тестируем доставляемость через mail‑tester.com — оценка 9+/10. Cron: агенты Битрикс переводим на системный cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. На cron вешаем обмен с 1С (15–60 мин), поисковую переиндексацию, бэкапы (mysqldump + rsync, ротация 7+4), очистку временных файлов.

Безопасность и администрирование

Файловая система: владелец www-data, директории 755, файлы 644, upload 775. nginx блокирует доступ к файлам конфигурации. Включаем Проактивную защиту Битрикс — WAF, контроль активности (блокировка после 5 неудачных попыток), проверку целостности ядра. Для админ‑панели: двухфакторная аутентификация через Google Authenticator или OTP, ограничение доступа по IP через nginx для параноиков.

Сколько времени занимает установка 1С-Битрикс и настройка?

Проверка после установки (пошаговый чек‑лист)

1. Монитор производительности (/bitrix/admin/perfmon_panel.php) — целимся в 30+ баллов. Ниже 20 — есть серьёзные проблемы с конфигурацией.
2. Проверка системы — автоматическая проверка всех параметров. Красные пункты — исправляем обязательно, жёлтые — по ситуации.
3. Сканер безопасности — проверка на типичные уязвимости.
4. PageSpeed Insights — TTFB < 200мс на VPS, LCP < 2.5с.
5. Тестовый обмен с 1С — если планируется интеграция, проверяем CommerceML‑обмен до запуска.

Дополнительно проверяем версии ПО, настройки кэширования, работу cron, SSL‑сертификат, SPF/DKIM/DMARC, права доступа, удаление дефолтных пользователей и страниц. Для проектов с 54‑ФЗ убеждаемся, что настроена фискализация через ОФД‑провайдера.

Что входит в работу (deliverables)

• Полностью настроенный сервер под 1С-Битрикс с оптимизацией MySQL, PHP, nginx.
• Установленная и активированная лицензия нужной редакции.
• SSL‑сертификат, почтовые настройки, cron и бэкапы.
• Документация: все параметры конфигурации, доступы, cron‑задачи.
• Обучение контент‑менеджера: как заходить в админку, добавлять товары, загружать изображения.
• Поддержка после установки в течение 30 дней — консультации по настройкам.

Почему стоит доверить установку профессионалам?

Неправильная установка — потеря времени и денег. Мы видели проекты, где магазин на «Старте» не мог выдержать 50 посетителей, потому что не был настроен innodb_buffer_pool_size. После переноса на VPS с правильной конфигурацией сайт «полетел». Неправильная конфигурация может обходиться в 30 000 ₽ ежемесячно из‑за избыточного потребления ресурсов. Вы получаете готовую архитектуру, которая масштабируется. Закажите установку 1С-Битрикс под ключ — и получите надёжную платформу для роста бизнеса. Свяжитесь с нами — рассчитаем стоимость под ваш проект. Опыт более 7 лет, реализовано 120+ проектов на Битрикс, включая highload‑магазины с миллионными каталогами. Обращайтесь — мы поможем настроить Битрикс под ваш проект.