Самый быстрый способ добавить интерактивную 3D-модель на сайт - экспортировать её в GLB и подключить к бесплатному веб-компоненту Google model-viewer. Примерно десять строк HTML дадут вращение, приближение и AR на телефонах. Если магазин работает на Shopify, GLB можно загрузить прямо в карточку товара. Для более сложных задач, таких как управление камерой при прокрутке, смена материалов или интерфейс в стиле бренда, модуль просмотра разрабатывают на Three.js.
Вот четыре варианта: от самого простого до полностью индивидуальной разработки.
4 способа встроить 3D-модель на сайт
| Вариант | Трудозатраты | Свобода настройки | AR | Для каких задач |
|---|---|---|---|---|
| model-viewer | Низкий | Средний | Да (Android, iOS) | Большинство карточек товаров и сайтов брендов |
| Вставка Sketchfab | Минимальные | Низкий | Через Sketchfab | Портфолио, музеи, быстрая демонстрация работ |
| Встроенное 3D в Shopify | Низкий | Низкий | Да | Карточки товаров Shopify |
| Собственная разработка на Three.js | Высокий | Полная | Если предусмотрено в разработке | Первый экран, конфигураторы, истории с управлением при прокрутке |
1. model-viewer
Веб-компонент Google с открытым исходным кодом. Подключаете один скрипт, а затем используете тег <model-viewer> так же, как <img>. Компонент отвечает за управление камерой, освещение, статичное изображение на время загрузки и переход в AR. Мы обычно рекомендуем его, если для просмотра 3D-модели на сайте не нужны нестандартные функции.
2. Вставка Sketchfab
Загрузите модель в Sketchfab, нажмите Embed и вставьте iframe на страницу. Компромисс в том, что вы используете плеер и экран загрузки Sketchfab и зависите от его платформы.
3. Встроенное 3D в Shopify
Shopify принимает GLB в медиаматериалах товара и показывает модель через встроенную функцию темы. По требованиям для партнёров общий размер файла должен быть около 4 МБ, а текстуры не больше 2048 × 2048 пикселей. Масштаб должен соответствовать реальным размерам товара. Настройку темы разбираем в руководстве по 3D-моделям в Shopify.
4. Собственная разработка на Three.js
Подходит, когда модель участвует в подаче продукта, а не просто находится в отдельном блоке: реагирует на прокрутку, меняет материал по нажатию или становится частью специально оформленной сцены. Такое решение нужно разрабатывать, а не просто вставлять. Когда это оправданно, разбираем в руководстве по 3D-визуализации товаров.
Форматы файлов: glTF, GLB и USDZ
- glTF / GLB. glTF - открытый стандарт 3D для веба, который поддерживает Khronos. GLB - его двоичная версия: сетка, материалы и текстуры собраны в одном файле. Используйте GLB.
- USDZ. Формат Apple для AR Quick Look на iPhone и iPad. В model-viewer его можно указать через
ios-srcили не добавлять отдельно: компонент автоматически создаст USDZ, когда посетитель нажмёт AR на iOS. - FBX, OBJ, STEP, SolidWorks. Это не веб-форматы. Сначала преобразуйте файл в GLB. Модели, экспортированные из CAD, обычно нужно облегчить, перестроив сетку.
Как показать 3D-модель на сайте с model-viewer: по шагам
- Экспортируйте GLB из Blender или другого 3D-редактора. Сохраните реальный масштаб, используя метры.
- Сожмите файл. Обработайте его в glTF-Transform или аналогичном инструменте, чтобы уменьшить объём геометрии и текстур.
- Подготовьте статичное изображение модели в начальном ракурсе. Оно появится сразу и будет видно, пока модель загружается.
- Добавьте код:
<script type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer
src="/models/lounge-chair.glb"
poster="/models/lounge-chair-poster.webp"
alt="Oak lounge chair with bone wool cushion, rotatable 3D view"
camera-controls
touch-action="pan-y"
auto-rotate
ar
ar-modes="webxr scene-viewer quick-look"
loading="lazy"
style="width:100%; aspect-ratio:1/1;">
</model-viewer>
- Проверьте на двух настоящих телефонах: одном iPhone и одном Android среднего класса. Убедитесь, что страница прокручивается даже при касании модели (за это отвечает
touch-action="pan-y") и что кнопка AR отображается.
Перед запуском проверьте актуальный номер версии на modelviewer.dev и закрепите его вместо загрузки «latest». Разработчику, которому нужны технические подробности, пригодится руководство Cloud Four по встраиванию 3D-моделей на веб-страницы.
Ограничения по размеру для быстрой загрузки
Самая частая ошибка - загрузить модель на 40 МБ прямо из CAD. Ориентир Shopify около 4 МБ можно принять за разумную верхнюю границу. Для модели на первом экране мы ставим более строгий лимит.
Мы ориентируемся на сжатый GLB размером не больше 2 МБ для модели на первом экране и текстуры 1K-2K в формате KTX2. Модель загружается после отображения остальной страницы. Все лимиты и этапы сжатия описаны в руководстве по скорости 3D-сайтов.
AR: что и где работает
model-viewer поддерживает три режима AR: webxr, scene-viewer (Android) и quick-look (iOS). Для WebXR нужны браузерные API, которые, по документации model-viewer, доступны в Chrome, Edge и Samsung Internet, но отсутствуют в Safari и Firefox. Поэтому важно указать все три режима: телефон выберет тот, который поддерживает.
Частые ошибки
- Неверный масштаб. Кресло высотой 3 см в AR подрывает доверие к изображению товара.
- Нет статичного изображения. Пока модель загружается, посетитель видит пустой блок.
- Прокрутка блокируется. Модуль просмотра на всю ширину страницы может перехватывать свайпы на телефоне.
- Нет alt-текста. Модели нужно описание, как и любому изображению.
- Слишком много модулей просмотра на странице. Каждый отдельно загружается и создаёт собственный контекст GPU.
