BIM. Инжиниринг объектов
капитального строительства

Инструкция для встраивания 3D моделей sketchfab на сайт

09 апреля 2021

Назначение

В данной инструкции описаны наши рекомендации по встраиванию 3D моделей sketchfab на сайт.

Подбор 3D модели

Подобрать 3D модель среди наших вы можете в разделе 3D модели или на странице нашего аккаунта sketchfab.com/vvp-eng

Код для встраивания

Чтобы получить код, который генерирует sketchfab для встраивания на сайт, вам необходимо:

  1. Зайти на страницу с 3D моделью, например, по ссылке в заголовке 3D модели

    sketchfab ссылка на модель

  2. На странице модели сайта sketchfab под 3D моделью нажать кнопку Embed

    sketchfab ссылка для встраивания на сайт

  3. Вам откроется окно Embed Viewer с кодом для встраивания и базовыми настройками. На скриншоте показаны настройки, которые мы рекомендуем использовать при встраивании наших моделей.

    sketchfab embed viewer
    sketchfab embed viewer tab 2
    sketchfab embed viewer tab 3
    sketchfab embed viewer tab 4

    Вам потребуется:

    1. Подстроить размер окна под свой сайт в поле Size.

    2. Выставить галочки опций справа от модели как на скриншотах.

    3. Скопировать сгенерированный код кнопкой под кодом COPY TO CLIPBOARD.

    4. Вставить код себе на сайт.

Подробное писание основных настроек с нашими рекомендациями

Если хотите тонко настроить окно c нашими 3D моделями на вашем сайте, ознакомьтесь с подробным описанием настроек или обратитесь к нам: Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript..

  • Show Caption

    Show Caption
    Под видео могут отображаться ссылки на исходный сайт с 3D моделью. Мы предпочитаем отключать данную функцию, чтобы лишний раз не перенаправлять человека на другой сайт. Внешняя ссылка уже содерживатся в самом плеере и ее дублирование не требуется.
  • Display model information

    Display model information
    Информация о модели в верхней части 3D модели. Мы предпочитаем оставлять включенной данную настройку, чтобы пользователь лишний раз мог прочитать название модели и убедиться в интерактивности модели при наведении мышки.
  • Autostart

    Включение автоматического запуска 3D-модели при загрузке страницы. При выключении данной функции, необходимо нажать на кнопку “Play”, которая схожа с запуском видео. Мы предпочитаем отключать данную функцию чтобы страницы грузились быстро у людей с медленным интернетом, а также человек увидел анимации при начале пользования моделью, если они предусмотрены.
  • Animate entrance

    После загрузки модели камера красиво подлетает к установленной точке обзора 3D-модели, соответственно, при выключении функции модель загружается сразу на установленной точке обзора. Мы предпочитаем включать данную функцию, чтобы человек лучше понял, что это 3D объект, который можно крутить, а также заранее увидел модель с разных сторон.
  • Turnable animation

    После загрузки модели камера начинает плавно вращаться вокруг своей оси в горизонтальной плоскости. Мы настоятельно не рекомендуем использовать данную функцию, т.к. даже после начала взаимодействия с моделью, вращение автоматически продолжится при любой минимальной паузе в действиях пользователя, что очень раздражительно. Данная функция может быть полезна только для моделей, где нет аннотаций, высокой детализации и не нужно всматриваться. Но даже в этом случае анимация всегда будет оттягивать внимание на себя, а значит не даст сосредоточиться пользователю на чём-то еще.
  • Preload textures

    Предварительная загрузка текстур. При выключении данной функции, загрузочный экран заканчивается сразу после загрузки модели, а текстуры догружаются уже в пространстве модели, в связи с чем могут наблюдаться кратковременные подвисания пока не прогрузятся все текстуры. При включении данной функции, загрузочный экран закончится только после загрузки модели и всех текстур, что не приведёт к подвисаниям, но заметно продлит ожидание загрузочного экрана. Мы рекомендуем выключать предварительную загрузку текстур, т.к. для пользователя всегда очень критично время ожидания загрузки и велик шанс отказа. Конечно, если это не лояльный пользователь, например тот, кто через поисковик перебирает множество сайтов и не может тратить много времени на просмотр каждого пока не поймет, что это то, что ему нужно.
  • Transparent background

    Функция позволяет сделать прозрачный фон 3D-модели. Мы не рекомендуем использовать данную настройку, т.к. в полноэкранном режиме вместо изображения на фоне будет просто чёрный цвет. Может быть полезно только тем, кто запрещает разворачивание модели на весь экран и есть нестандартные дизайнерские задачи, например анимированный фон.
  • Navigation hint

    Navigation hint
    Показ иконки возможности интерактивности. Мы предпочитаем оставлять по умолчанию вариант "Show hint once per session", означающий отображение иконки один раз за сессию. Таким образом, пользователь увидит анимацию что модель интерактивна и ее можно вращать. При этом, повторно эта анимация не будет появляться, т.к. пользователь уже будет понимать как ею пользоваться.
  • Control Option

    Control Option
    Группа настроек, отвечающая за отображение кнопок на панели управления, расположенной внизу 3D-модели. Мы рекомендуем оставлять все кнопки управления включенными по умолчанию, чтобы предоставить пользователю максимальный функционал. Исключения могут быть для пункта Inspector, чтобы повысить скорость загрузки больших 3D моделей. Инспектор нужен только тем, кому нужно настраивать цвета, материалы и прочее на готовой модели. В остальном исключения могут быть только для особых целей.
  • Show Annotations

    Show Annotations
    Отображение аннотаций в виде иконок с цифрами, клик по которым показывает подробную информацию об элементе. Мы настоятельно рекомендуем включать данную функцию, т.к. это информационное наполнение является ключевым в наших моделях.
  • Preselect annotation

    Preselect annotation
    Предвыбранная аннотация. Мы предпочитаем оставлять отключенной данную функцию, чтобы анимация открытия модели проигрывалась по изначальной задумке. Вместе с тем, функцию можно использовать, если целью модели будет показ конкретной аннотации под определенным номером.
  • Autopilot

    После загрузки модели, начинается автоматический, последовательный показ аннотаций. Мы не рекомендуем использовать данный пункт. При взаимодействии с моделью автоматическая смена аннотаций останавливается (в отличии от Turntable animation). Использование данного пункта необходимо только для демонстрации возможностей сменить аннотации, поэтому опцию можно рассмотреть при использовании одной тестовой модели. В остальных случаях пункт создает неудобства, например, отвлекает от анимации в модели, при перезагрузке страницы каждый раз движение нужно останавливать. Для чтения аннотаций опция также не подходит, т.к. не учитывает время на прочтение текста пользователем.