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

В данной статье расскажу, как добавить на свой сайт любую 3D модель с помощью простого в использовании облачного сервиса Site3D Configurator.

Очень важно качественно подготовить модель для её загрузки на онлайн-платформу.

Сервис поддерживает загрузку моделей во множестве форматов, но для максимальной реалистичности рекомендует работать с форматом GLB (оптимизированная версия формата GLTF). Данный формат специально разработан для реалистичной демонстрации моделей в Web-пространстве.

Наиболее подходящая программа для работы с данным форматом – Blender. Это современный, активно развивающийся и бесплатный редактор 3D графики.

В дальнейшем мы будем в основном ориентироваться на данный формат хранения 3D моделей.

Для удобства работы с моделью в сервисе необходимо установить геометрии всех мешей в их геометрических центрах:

• В Blender выбираем Set Origin => Origin to Geometry => Bound Center.

• В 3D max это делается с помощью Pivot Point.

Также следует разместить модель по центру координат.

Все это сервис может проделать и самостоятельно с помощью настройки Параметры сцены => Стартовый вид => Поместить модель по центру. Но лучше контролировать данный процесс самостоятельно.

Для сглаживания модели в Blender выбираем модификатор Subdivision Surface и увеличиваем Levels Viewport до соответствующего уровня.

Формат GLB требователен к материалам, поэтому к нему нужна особая подготовка. Важно ознакомиться с допустимыми свойствами материала для формата GLB.

Части модели (далее меши), которые пользователи могут перекрашивать (менять цвет, текстуру), должны иметь только один материал.

Если вы работаете в 3D max и используете VRAY/CORONA материалы, то вам необходимо преобразовать их в стандартные материалы:

• Вручную (смотрите урок)

• Использовать плагин для автоматического конвертирования материалов V-ray в стандартные (смотрите урок)

Часто нам попадаются готовые модели, но без текстур. Без них модели не будут выглядеть реалистичными.

Для нанесения текстуры на модель в Blender:

• Выделяем модель

• В нижней части выбираем Shader Editor и переносим туда нужную текстуру

• Соединяем текстуру с нашей моделью через Color к Base Color

• Если текстура легла не ровно, то переходим к панели UV Editing. Появляется два окна, в правом окне переходим в режим Edit Mode и выделяем модель. В левом окне появляется модель в развернутом виде. Выравниваем текстуру.

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

• В Blender выберите в меню File => External Data => Automatically Pack Resources

• Чтобы корректно экспортировать материалы с 3D max, важно, чтобы они все находились в одной папке (как это сделать).

• Примените все модификаторы

• Удалите лишние вершины и полигоны, которые не вносят существенный вклад в визуальную составляющую

• Уменьшите размер текстур (для большинства случаев достаточно изображений размером 1024 на 1024 в формате jpeg, которые можно сжать, например, в фотошопе со значением оптимизации в 60%)

Рекомендуемый итоговый размер модели без сжатия – до 3 Мб

Если вы работаете в 3D max, то в 2023 версии появилась функция экспорта в GLB. Для более ранних версий: сначала можете экспортировать в FBX с материалами, а затем воспользоваться онлайн конвертером для экспорта в GLB.

Проходим простую регистрацию в сервисе и нажимаем на кнопку добавления нового проекта.

Загрузить можно как одиночный файл, так и zip архив, если у модели есть отдельные файлы текстур или иных данных.

Для тестирования работы сервиса можно воспользоваться каталогом готовых моделей.

Для начала работы с моделью рекомендуем настроить стартовый вид и параметры масштабирования и вращения.

Анимационные треки работают только в формате GLB и должны быть встроены в саму модель.

Доступны следующие возможности:

• Добавление меток - текстовых пояснений, появляющихся во время воспроизведения анимации

• Добавление списка вариантов анимаций

• Ручное управление с помощью прокрутки колесиком мыши или жестом на сенсорном экране

Вы можете включить показ общих размеров модели и пола нужного размера и цвета.

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

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

Вы можете настроить качество графики, параметры яркости и контраста, а также наличие теней.

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

Далее настраиваем кнопки навигации и, если требуется, содержимое и момент появления окна помощи.

Здесь вы можете настроить внешний вид интерфейса виджета под стилистику вашего бренда.

На третьем шаге создания проекта можно кликнуть по нужной части модели и выбрать необходимую настройку.

У любой настройки есть поле названия части модели, где нем можно указать только часть названия, чтобы настройка применилась к нескольким элементам модели, у которых присутствует данная часть имени.

Для любой из частей модели можно настроить смену текстур и цветов.

Для визуальных текстовых подсказок отдельных частей модели служит блок меток. Их можно стилизовать под свои предпочтения.

Каждый элемент модели может служить ссылкой на внутренние разделы сайта или внешние ресурсы.

От выбора материалов и иных настроек может зависеть стоимость готового продукта, которую можно вывести в виджете.

Также можно включить возможность оформить заявку прямо из виджета.

Чтобы разместить модель на своем сайте, необходимо указать домен на последнем шаге создания проекта. Если сайтов несколько, то можно указать список доменов (каждый с новой строки).

Есть возможность скопировать упрощенный код для вставки виджета в Wordpress.

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