3D+AR вьювер
Платформа Аризо предлагает разные способы встроить на сайт 3D- и AR-просмотр объекта. В этой статье расскажем об одном из вариантов интеграции — 3D+AR вьювер.
Как работает 3D+AR вьювер
3D+AR вьювер показывает 3D-модель объекта в разных цветах. Также позволяет видеть размеры объекта и примерить его в интерьере с помощью дополненной реальности. Открывается в модальном окне на вашем сайте поверх основной страницы.
Работает на десктоп- и мобильных устройствах:
Работает на десктоп- и мобильных устройствах:
3D+AR вьювер можно установить на любой элемент на сайте. Например, на кнопку, изображение или иконку.
Кому подойдет этот вариант интеграции
3D+AR вьювер удобен, если вы:
- Используете сайт как основную площадку продаж. Вьювер открывается в модальном окне на вашем сайте, так что пользователю не придется переходить на внешние страницы.
- Предлагаете товары в нескольких цветах или комплектациях. В 3D+AR вьювере показаны все варианты объекта.
- Продаете мебель, декор или технику. Кнопку, открывающую вьювер, можно добавить в карточку товара, чтобы покупатель смог рассмотреть объект со всех сторон и сразу примерить его в интерьере.
Как добавить на сайт
На вашем сайте перед тегом </header> или внутри <head> добавьте этот скрипт:
<script type="module" src="https://viewer.arizo.ru/viewer/script.js" async defer></script>
<script>
window.onload = function() {
window.vizbl.initModalButton('vizbl_3d_view')
}
</script>У элемента, по нажатию на который должен открываться просмотрщик, укажите:
class="vizbl_3d_view"
data-object-tinuuid="OBJECT_ID"
data-object-hid="OBJECT_HID"
data-size-type="cm"
OBJECT_ID — код вашей модели. Чтобы его получить, в личном кабинете на верхней панели нажмите на «3D модели». В списке моделей справа от каждой из них вы увидите иконку копирования. Нажмите на неё и откроется список, в котором будет ID вашей модели.
OBJECT_HID — цвет объекта. Указывать HID не обязательно — можно оставить его пустым или удалить из строки на сайте.
Чтобы получить HID, в списке моделей скопируйте код, который указан под кодом модели в выпадающем списке.
class="vizbl_3d_view"
data-object-tinuuid="OBJECT_ID"
data-object-hid="OBJECT_HID"
data-size-type="cm"
OBJECT_ID — код вашей модели. Чтобы его получить, в личном кабинете на верхней панели нажмите на «3D модели». В списке моделей справа от каждой из них вы увидите иконку копирования. Нажмите на неё и откроется список, в котором будет ID вашей модели.
OBJECT_HID — цвет объекта. Указывать HID не обязательно — можно оставить его пустым или удалить из строки на сайте.
Чтобы получить HID, в списке моделей скопируйте код, который указан под кодом модели в выпадающем списке.
Настроенный элемент может выглядеть так:
<button class="vizbl_3d_view" data-object-tinuuid="K7CCtKS9Qaer7fQW-6IN1Q" data-object-hid=" " data-size-type="cm">Посмотреть в AR</button>