Налаштування 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 рази порівняно з дефолтом. Правильна конфігурація сервера заощаджує до 60% вартості хостингу щомісяця. Оцінимо ваш проєкт за один день — отримайте консультацію. Звертайтеся, щоб замовити встановлення під ключ з гарантією продуктивності.

Як вибрати хостинг та редакцію для встановлення 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 з оптовими цінами та трьома складами. Перехід на «Бізнес» — доплата різниці, дані не втрачаються, але краще передбачити заздалегідь. Наші фахівці підберуть редакцію під поточні завдання і з запасом на зростання. Наприклад, ліцензія «Бізнес» окупається за рахунок мультискладу та обміну з 1С, а неправильний вибір призводить до додаткових витрат, які можуть у 2–3 рази перевищити вартість ліцензії.

Які налаштування сервера критичні для 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. Порівняно з Apache + mod_php, зв’язка nginx + PHP-FPM споживає на 30% менше оперативної пам’яті при однаковому навантаженні — це підтверджено на наших проєктах.

База даних та кешування

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']]]]

Redis прискорює роботу сайту в 1.5 рази порівняно з Memcached завдяки постійним з’єднанням та вбудованому кешуванню сесій.

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 з правильною конфігурацією сайт «полетів». Неправильна конфігурація призводить до невиправданих витрат — іноді в 2–3 рази дорожче, ніж вартість професійного налаштування. Ви отримуєте готову архітектуру, яка масштабується. Замовте встановлення 1С-Бітрікс під ключ — й отримайте надійну платформу для зростання бізнесу. Зв'яжіться з нами — розрахуємо вартість під ваш проєкт. Досвід понад 7 років, реалізовано 120+ проєктів на Бітрікс, включаючи highload‑магазини з каталогами понад 100 000 товарів. Звертайтеся — ми допоможемо налаштувати Бітрікс під ваш проєкт.