Интерактивная 3D-модель на сайте — как она работает и что нужно от модели

Покупатель вращает товар, приближает разъёмы, смотрит снизу — это убеждает лучше десяти фотографий. Но 3D на сайте работает, только если модель сделана для веба: модель из каталожного рендера будет грузиться долго, а на телефоне может не открыться вовсе.

Как это устроено

1. Модель хранится файлом GLB — геометрия, материалы и текстуры в одном файле.
2. Браузер скачивает файл, как картинку, только тяжелее.
3. Видеокарта устройства рисует модель через WebGL — стандарт 3D-графики в браузере — заново для каждого кадра. Поэтому её можно вращать.

Пока модель грузится

На месте модели сначала показывают картинку-постер — рендер того же ракурса. Когда модель скачалась, она подменяет постер, и её можно вращать. Страница не стоит пустой, а на медленном интернете посетитель всё равно видит товар.

Что нужно от модели

• Облегчённая геометрия: невидимые детали убраны, сетка не плотнее, чем различимо на экране.
• Сжатые текстуры разумного размера.
• Немного материалов.
• Правильный масштаб и ориентация: модель стоит, а не лежит на боку.

Каталожные рендеры и веб-модель часто делают двумя версиями одной модели — тяжёлой и облегчённой. Почему тяжёлая тормозит — в статье Почему 3D-модель тормозит на телефоне.

Как встроить на сайт

• Готовый вьювер. model-viewer — открытый веб-компонент от Google: вставляется на страницу одним тегом, умеет вращение, зум, постер и AR.
• Свой вьювер на three.js — когда нужен особый интерфейс: переключение вариантов, анимация, конфигуратор.
• Что передать разработчику: GLB, постер и, если нужен AR на iPhone, USDZ. Про форматы — в статье Форматы 3D-файлов.

Как это выглядит на практике

• Getic: более 50 моделей сетевого оборудования для просмотра на странице товара — в двух версиях геометрии: тяжёлой для каталожных рендеров и облегчённой для мобильного трафика. Интеграцию во вьювер на three.js делала команда клиента.
• SoftLogic: GLB-модель работает в веб-вьювере внизу карточки товара на сайте клиента.
• RP Grand: живая 3D-модель прямо в кейсе — её можно покрутить и рассмотреть.

Частые ошибки

• Поставить на сайт модель из каталожного рендера без облегчения.
• Не показывать постер: пустой блок, пока модель грузится.
• Модель без масштаба: на сайте «плавает», в AR — игрушечная.
• Загружать модель сразу, даже если посетитель до неё не долистал.

Чек-лист

1. GLB, облегчённый для веба.
2. Постер того же ракурса.
3. Масштаб и ориентация.
4. Вьювер: готовый или свой.
5. USDZ, если нужен AR на iPhone.
6. Проверка на среднем телефоне, а не только на рабочем компьютере.