Как добавить 3D-модель на сайт и AR на страницу товара

На фото товар виден с одной стороны. 3D-модель на странице можно покрутить, приблизить и рассмотреть со всех сторон, а в AR — поставить у себя дома и понять, поместится ли диван. Вот как сделать и то и другое в ARClip — без кода и без своего хостинга.

Шаг 1. Соберите сцену с товаром

Создайте проект и перетащите модель товара: подойдут GLB, glTF, FBX и OBJ — редактор сам переведёт их в GLB. Модели нет? Её можно сделать по фото.

Для страницы сайта лучше всего подходит обычная 3D-сцена: она открывается сразу, на любом устройстве и без камеры. Пусть камера вращается вокруг товара, а наклон будет ограничен, чтобы товар не разглядывали снизу.

Шаг 2. Добавьте варианты

Цвета, отделка и комплектации — это состояния объекта. Добавьте товару компонент Состояния с вариантами и компонент События: шаг Переключить состояние покажет другой вариант по нажатию на образец цвета или на саму модель. Всё без кода.

• Ткань, металл и стекло собираются из узлов в Редакторе материалов — результат видно сразу.
• Кнопки выбора, образцы цветов, подсказки и цену поверх 3D делают в Редакторе UI.
• Если нужны цена выбранной комплектации и переход к покупке, в документации есть готовый рецепт: скрипт запоминает выбор, показывает цену и ведёт на страницу покупки с нужной отделкой — «Конфигуратор товара».
• Переключать варианты может и ваша страница — и узнавать, какой выбрали: <arclip-viewer> сообщает об этом событием. Для этого нужны несколько строк скрипта на вашем сайте и встраивание В странице, не В iframe.

Шаг 3. Встройте сцену на сайт

1. Нажмите Опубликовать и опубликуйте проект в Браузере.
2. В том же окне выберите ARClip Viewer и нажмите Скопировать код.
3. Вставьте код на страницу туда, где должна быть сцена.

Код — это строка <script> и тег <arclip-viewer>:

<arclip-viewer
  address="my-chair"
  ar
  style="display:block;width:100%;height:480px"
></arclip-viewer>

Размер задают стили вашей страницы. Внутри работают анимации, логика и UI: на странице живая сцена, а не модель, которую можно только покрутить. Подойдёт сайт, куда можно вставить свой HTML-код.

Шаг 4. Добавьте AR на страницу товара

1. В том же проекте нажмите Добавить пространство и задайте сцене нового пространства триггер Поверхность — товар встанет на пол или стол в комнате покупателя.
2. Опубликуйте проект ещё раз.

Во встроенной сцене появится кнопка «Смотреть в AR»: на телефоне она открывает AR, на компьютере показывает QR-код — его сканируют камерой телефона. Кнопку включает атрибут ar в коде: без него кнопки нет.

Хотите свою кнопку на странице? В окне публикации выберите AR-пространство в поле Открывается в — ссылка и QR-код там ведут прямо в него.

Покупатель открывает AR прямо в браузере телефона, без приложения. Это работает на любом тарифе.

Что ещё пригодится магазину

• Картинки и ролики для каталога. Рендеры, скриншоты и видео — прямо из редактора, а плагин «Предметная съёмка» ставит модель для чистого предметного кадра.
• Анимация товара. Открыть дверцу, разобрать на детали, показать механизм — ключевыми кадрами на таймлайне.
• Аналитика. Счётчики просмотров есть на всех тарифах.
• Свой домен — на платных тарифах.

Чего пока нет

• Готовой связки с корзиной магазина: переход к покупке делается ссылкой.

Выбираете между сервисами? Мы честно сравнили ARClip с популярными: ARClip или Sketchfab, ARClip или Threekit, ARClip или Zakeke. Spline и Vectary — на странице «Сравнения».