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

> Модель на сайте — это файл GLB, который браузер скачивает и рисует видеокартой устройства, поэтому её можно вращать мышью или пальцем. Скорость зависит от веса файла и того, сколько памяти модель займёт на телефоне, поэтому для веба модель облегчают: упрощают геометрию, сжимают текстуры. Пока модель грузится, на её месте показывают картинку-постер. Встраивают модель готовым вьювером, например открытым model-viewer от Google, или своим на three.js.

Source: https://gluke.ru/ru/knowledge/3d-viewer-on-website · Author: Александр Глухов · Updated: 2026-10-08

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

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

> **Схема:** Четыре шага: файл GLB с моделью и текстурами, загрузка по сети, видеокарта устройства рисует через WebGL, экран показывает картинку кадр за кадром.
>
> От файла до экрана: браузер скачивает модель, видеокарта рисует её заново для каждого кадра.

1. Модель хранится файлом **[GLB](https://gluke.ru/ru/knowledge/glossary#glb)** — геометрия, материалы и [текстуры](https://gluke.ru/ru/knowledge/glossary#texture) в одном файле.
2. Браузер **скачивает** файл, как картинку, только тяжелее.
3. **Видеокарта** устройства рисует модель через WebGL — стандарт 3D-графики в браузере — заново для каждого кадра. Поэтому её можно вращать.

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

> **Схема:** Три состояния блока на странице: сразу — картинка-постер; затем постер полупрозрачный и полоска загрузки; в конце модель, которую можно вращать.
>
> Страница не стоит пустой ни секунды: сначала постер, потом модель.

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

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

> **Схема:** Две версии одной модели. Из каталожного рендера: очень плотная сетка, длинные полоски веса сетки, текстур и времени загрузки. Облегчённая для веба: сетка реже, полоски в несколько раз короче.
>
> Одна и та же модель: из каталожного рендера и облегчённая для веба. Полоски — для сравнения, без чисел.

- **Облегчённая геометрия**: невидимые детали убраны, [сетка](https://gluke.ru/ru/knowledge/glossary#mesh) не плотнее, чем различимо на экране.
- **Сжатые текстуры** разумного размера.
- **Немного материалов.**
- **Правильный масштаб и ориентация**: модель стоит, а не лежит на боку.

Каталожные рендеры и веб-модель часто делают двумя версиями одной модели — тяжёлой и облегчённой. Почему тяжёлая тормозит — в статье [Почему 3D-модель тормозит на телефоне](https://gluke.ru/ru/knowledge/mobile-3d-performance).

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

- **Готовый вьювер.** model-viewer — открытый веб-компонент от Google: вставляется на страницу одним тегом, умеет вращение, зум, постер и AR.
- **Свой вьювер на three.js** — когда нужен особый интерфейс: переключение вариантов, анимация, конфигуратор.
- **Что передать разработчику**: GLB, постер и, если нужен AR на iPhone, [USDZ](https://gluke.ru/ru/knowledge/glossary#usdz). Про форматы — в статье [Форматы 3D-файлов](https://gluke.ru/ru/knowledge/3d-file-formats).

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

- [Getic](https://gluke.ru/ru/projects/getic): более 50 моделей сетевого оборудования для просмотра на странице товара — в двух версиях геометрии: тяжёлой для каталожных рендеров и облегчённой для мобильного трафика. Интеграцию во вьювер на three.js делала команда клиента.
- [SoftLogic](https://gluke.ru/ru/projects/softlogic): GLB-модель работает в веб-вьювере внизу карточки товара на сайте клиента.
- [RP Grand](https://gluke.ru/ru/projects/rp-grand): живая 3D-модель прямо в кейсе — её можно покрутить и рассмотреть.

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

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

## Чек-лист

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