3D / AR · model-viewer

model-viewer

Google web component: 3D-модель + AR «в комнате»

Tier 1Легко с AIОк на мобилеfree (Apache-2.0)Web Component (любой сайт)

Design DNA

«Товар крутится на лендинге и открывается в AR — e-commerce вау без Three-кода.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Встрой <model-viewer> с GLB, poster и loading="lazy".
Включи AR где поддерживается. На слабых сетях — сжатая модель.
Не тащи R3F, если нужен только просмотр товара. Сохрани a11y (alt/poster).

Что умеет

·GLB/GLTF viewer
·AR Quick Look / Scene Viewer
·Автоповорот, hotspots

Чего не умеет

·Не кастомный игровой мир
·Тяжёлые модели всё равно тормозят

Когда брать

·Карточка товара, портфолио объекта
·Нужен AR на телефоне

Когда не брать

·Шейдерная арт-сцена → Three/R3F
·Редактор сцены → Spline

С чем сочетается

Next.jsSpline (контент)GSAP вокруг блока

Альтернативы

Spline embedThree.jsBabylon viewer

Типичные ошибки

·Огромный GLB без Draco/compression
·Без poster-картинки (LCP)

Демо и ссылки

modelviewer.dev