Встраивание

Вьюер витрины — самодостаточный веб-компонент <lp-viewer>. Один тег <script> — и трёхмерный образец letspack живёт на вашем сайте: с вращением, подсветкой деталей и анимациями.

Быстрый старт

Подключите бандл и поставьте тег. Атрибут product берёт модель и описания деталей из каталога витрины, href делает карточку ссылкой.

<script type="module" src="https://showroom.letspack.ru/embed/lp-viewer.js"></script>

<lp-viewer mode="card" product="food-box"
           href="https://showroom.letspack.ru/p/food-box/"
           style="width:320px;aspect-ratio:1/1"></lp-viewer>

Живой пример

Слева mode="card" — превью с автовращением, клик ведёт по ссылке. Справа mode="full" — полный вьюер: клик по детали открывает её описание, кнопки запускают анимации.

Атрибуты

Атрибут	Назначение
product	id образца из каталога витрины — модель, детали и анимации подтянутся сами
src	прямая ссылка на свой .glb — вместо product
mode	card — превью, full — полный вьюер (по умолчанию)
href	куда ведёт клик по карточке (только mode="card")
base	origin витрины для каталога; по умолчанию — откуда загружен скрипт
draco-path	путь к draco-декодеру; по умолчанию /draco/ на origin скрипта

Полный режим и свои модели

<lp-viewer mode="full" product="food-box"
           style="width:100%;max-width:720px;aspect-ratio:4/3"></lp-viewer>

<lp-viewer src="https://example.com/models/box.glb"
           style="width:320px;aspect-ratio:1/1"></lp-viewer>

Тема

Цвета вьюера наследуются из CSS-переменных — поправьте их под свой сайт:

lp-viewer {
  --lp-accent: #a07f4a;   /* акцент: подсветка деталей, кнопки   */
  --lp-surface: #fbf9f5;  /* фон панелей и скелетона             */
  --lp-ink: #1d1a16;      /* основной цвет текста                */
  --lp-line: #e4ddd0;     /* линии и рамки                       */
}

События и API

Событие	Когда
lp-load	модель загружена; detail.product — данные образца
lp-error	не удалось загрузить модель или каталог
lp-part-select	выбрана деталь; detail.part — её описание или null
lp-action	запуск и финиш анимации (detail.phase)
lp-card-click	клик по карточке в mode="card"

Методы: el.selectPart(node | null) — выбрать деталь снаружи, el.playAction(id) — запустить анимацию, el.loaded — промис загрузки.