Как добавить 3d модель на сайт

Как разместить 3D модель на сайте?

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

Веб-дизайн не стоит на месте, начинают набирать популярность 3D-сайты и лендинги. Разработчики создают и внедряют различные конструкторы, конфигураторы и 3D графику. Цель данных решений – повысить конверсию, привлечь внимание покупателей и повысить собственную популярность среди конкурентов.

Пример виджета с 3D просмотром модели

Загрузка примера.

Наше готовое решение

Мы разработали уникальный сервис Site3D Configurator, позволяющий встраивать в сайты интерактивный виджет с 3D моделью товара или услуги с поддержкой возможности конфигурирования (смена цветов, текстур, замена одних частей модели на другие, проигрывание анимации и многое другое).

Предоставьте пользователю собрать свое индивидуальное решение в трехмерном пространстве

Какие есть способы внедрения трехмерной графики в Интернет-ресурс?

Вставить трехмерную модель на свой ресурс можно при помощи различных библиотек, которые работают с технологией WebGL. Самые часто используемые из них:

• Three.js – наиболее популярная библиотека для создания трехмерного контента в Интернете. Она максимально оптимизирует работу с WebGL и автоматизирует множество процессов. Данная платформа позволяет разработчику максимально сконцентрироваться на приложении и работе с продуктом;
• Babylon.js – зачастую используется разработчиками при создании 3D-игр и приложений. Платформа проста в использовании, содержит все, что необходимо для создания и управления трехмерными объектами. Для запуска данного фреймфорка требуются современные браузеры, которые поддерживают WebGL. Все встроенные функции работают качественно и с точностью выполняют поставленные задачи;

Обе библиотеки требуют высокой квалификации от программиста и больших временных и финансовых затрат.

Как быстро добавить 3D модель на сайт

Чтобы оперативно внедрить объемную модель на свой Интернет ресурс, воспользуйтесь нашей разработкой, библиотекой Site3D, которая базируется на Three.js.

Для работы требуются лишь базовые знания JavaScript. Несколькими строками кода можно быстро встроить наш виджет для показа 3D модели в любом месте сайта. Наше решение адаптировано под любые мобильные и стационарные устройства.

Не теряйте время — подключайте 3D модели уже сейчас!

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

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

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

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

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

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

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

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

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

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

• Show Caption
• Display model information
• Autostart
• Animate entrance
• Turnable animation
• Preload textures
• Transparent background
• Navigation hint
• Control Option
• Show Annotations
• Preselect annotation
• Autopilot

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). Использование данного пункта необходимо только для демонстрации возможностей сменить аннотации, поэтому опцию можно рассмотреть при использовании одной тестовой модели. В остальных случаях пункт создает неудобства, например, отвлекает от анимации в модели, при перезагрузке страницы каждый раз движение нужно останавливать. Для чтения аннотаций опция также не подходит, т.к. не учитывает время на прочтение текста пользователем.

Как самостоятельно добавить 3D модель на сайт

Разберем вариант с сервисом Site3D Configurator. Из приятного – процесс займет буквально пару минут.

Немного о Site3D Configurator

Site3D Configurator – сервис для создания 3D виджетов на сайт. Посетители смогут просматривать 3D модель и взаимодействовать с ней: менять текстуры и цвета, скрывать и отображать объекты. Сервис работает прямо в браузере, без сторонних программ.

Инструкция по добавлению

На примере конструктора сайтов Tilda. Инструкция актуальная и для WIX.

Подготавливаем 3D модель

Вес файла не должен превышать 10 мб, в идеале — до 3 мб. От этого зависит скорость загрузки страницы вашего сайта. Вес модели может быть больше, но это увеличит время загрузки.

Авторизируемся на сайте configurator.site3d.site

Для работы необходима регистрация, это занимает несколько секунд.

Главная страница сервиса Site3D Configurator
Создаем проект и загружаем в него 3D модель

Для создания проекта переходим в личный кабинет. Нажимаем кнопку «+». Если ваша модель не загружается, проверьте правильность формата: сервис рекомендует использовать glb формат — он лучше всего поддерживается сервисом.

Личный кабинет
Настраиваем параметры сцены

Это необходимо, чтобы модель открывалась с нужного ракурса. Варианты базовой настройки на скриншоте: стартовый вид, масштабирование, вращение. Чаще всего этого достаточно.

Настройка параметров сцены

Больше о настройке сцены здесь.

Копируем код из раздела «Шаг 4»

Нажимаем на кнопку «Скопировать весь код».

Последний шаг создания 3D конфигуратора
Теперь переходим на Tilda

Создаем Zero block, удаляем с него все лишнее и вставляем в него код. По умолчанию отобразится блок высотой в 500px. Если вам необходим другой размер по высоте, то нужно дописать в код соответствующий параметр.

Код для вставки на сайт
Публикуем проект

В режиме предпросмотра виджет не отображается, нужно опубликовать проект для просмотра.

При этом после публикации сайта можно менять 3D модель. Все изменения совершаем в редакторе сервиса. Заново копировать код и обновлять блок HTML не нужно, все изменения применяются автоматически.

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

Возможности сервиса

С этим сервисом можно сделать целое веб-приложение. Оно позволит потенциальным покупателям экспериментировать с цветом, формой и разными особенностями товара. За пару минут посетитель сайта сможет создать идеальный дизайн, отрегулировать товар для своих нужд.

Заключение

Разбор полного функционала сервиса есть на сайте. Также есть видео-уроки на YouTube.

Остались вопросы? Ответим в комментариях!

Вставка 3D-объектов

Внимание: Эта статья рекомендует добавление стороннего кода. Поддержка Тильды не консультирует по вопросам работы или модификации стороннего кода.

Использование сервиса Sketchfab

Sketchfab — это сервис, в котором есть возможность создавать 3D-модели, хранить их или найти готовую в каталоге.

Создать свою модель можно в редакторе Vectary, но для создания собственной модели нужно иметь базовые навыки работы в 3D-редакторах. В Sketchfab же вы можете выбрать бесплатную готовую модель и получить код для вставки в HTML-элемент в Zero.

Плеер Sketchfab имеет нижнюю панель с управляющими элементами. Если вы хотите использовать 3D-модель как фон, то часть блока с кодом нужно вынести за пределы Grid-контейнера.