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

09 апреля 2021

Назначение

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

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

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

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

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

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

Вам потребуется:
1. Подстроить размер окна под свой сайт в поле Size.
2. Выставить галочки опций справа от модели как на скриншотах.
3. Скопировать сгенерированный код кнопкой под кодом COPY TO CLIPBOARD.
4. Вставить код себе на сайт.

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

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

Show Caption

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

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

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

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

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

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

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

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

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

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

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

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