Как разместить 3D-модель объекта в модальном окне
Для начала загрузите как минимум один объект в свой личный кабинет Визбл. Теперь вы можете добавить 3D-вьювер этого объекта на свой сайт.
Добавьте код на свой сайт
В личном кабинете app.vizbl.com откройте раздел «Мои объекты» — здесь находятся загруженные 3D-модели. Выберите нужный объект — откроется страница с информацией о нем и вариантами интеграции.

В разделе «Варианты интеграции» найдите «Модальный 3D-просмотрщик» и нажмите «Выбрать».
Следуйте инструкциям в открывшемся окне.
  • Добавьте приведенные ниже строки в код вашей веб-страницы.
<script src="https://viewer.vizbl.com/viewer/script.js" async defer></script>
<script>
    window.onload = function() {
      window.vizbl.init('vizbl_3d_view')
    }
</script>
  • Выберите элемент, при нажатии на который будет открываться 3D-просмотр объекта. Добавьте к этому элементу следующие атрибуты.
class="vizbl_3d_view"
data-tinuuid="OKb1FOpDRnOMjXQGG4c-sg"
data-hid="8a3cd100"
  • Измените параметр HID, если хотите установить конкретный цвет объекта.
Меняйте параметры в готовом коде
Пролистайте страницу с информацией об объекте до конца и найдите параметры TINUUID и HID.
TINUUID определяет сам объект, а HID — его цвет. Эти параметры можно менять, чтобы отображать любой из загруженных объектов в нужном цвете.