В данной статье расскажу, как добавить на свой сайт любую 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.
Начало работы с Site3D Configurator
Проходим простую регистрацию в сервисе и нажимаем на кнопку добавления нового проекта.
Загрузка модели на сервис
Загрузить можно как одиночный файл, так и zip архив, если у модели есть отдельные файлы текстур или иных данных.
Для тестирования работы сервиса можно воспользоваться каталогом готовых моделей.
Базовые настройки сцены
Для начала работы с моделью рекомендуем настроить стартовый вид и параметры масштабирования и вращения.
Анимация
Анимационные треки работают только в формате GLB и должны быть встроены в саму модель.
Доступны следующие возможности:
• Добавление меток - текстовых пояснений, появляющихся во время воспроизведения анимации
• Добавление списка вариантов анимаций
• Ручное управление с помощью прокрутки колесиком мыши или жестом на сенсорном экране
Размеры и пол
Вы можете включить показ общих размеров модели и пола нужного размера и цвета.
Панорама и освещение
Модель чаще смотрится более эффектно вместе с подходящей по смыслу панорамой. Их может быть несколько, тогда пользователь сможет выбирать подходящую при просмотре из списка.
Также для визуального отображения модели большое значение имеет освещение. Вы можете настраивать цвет и мощность общего освещения, а также цвет, мощность и направление для направленного света, исходящего сверху и снизу.
Настройки графики и оптимизации
Вы можете настроить качество графики, параметры яркости и контраста, а также наличие теней.
Рекомендуем оставлять включенной оптимизацию скорости отрисовки. Она особенно эффективна для моделей с наличием одинаковых элементов.
Навигация и окно помощи
Далее настраиваем кнопки навигации и, если требуется, содержимое и момент появления окна помощи.
Темы оформления
Здесь вы можете настроить внешний вид интерфейса виджета под стилистику вашего бренда.
Выбор части модели
На третьем шаге создания проекта можно кликнуть по нужной части модели и выбрать необходимую настройку.
У любой настройки есть поле названия части модели, где нем можно указать только часть названия, чтобы настройка применилась к нескольким элементам модели, у которых присутствует данная часть имени.
Настройка материалов
Для любой из частей модели можно настроить смену текстур и цветов.
Метки и ссылки
Для визуальных текстовых подсказок отдельных частей модели служит блок меток. Их можно стилизовать под свои предпочтения.
Каждый элемент модели может служить ссылкой на внутренние разделы сайта или внешние ресурсы.
Стоимость и форма заказа
От выбора материалов и иных настроек может зависеть стоимость готового продукта, которую можно вывести в виджете.
Также можно включить возможность оформить заявку прямо из виджета.
Получение кода для вставки на сайт или ссылки на просмотр
Чтобы разместить модель на своем сайте, необходимо указать домен на последнем шаге создания проекта. Если сайтов несколько, то можно указать список доменов (каждый с новой строки).
Есть возможность скопировать упрощенный код для вставки виджета в Wordpress.
Итого
Виджет от Site3D Configurator может работать на любых движках по созданию сайтов, в том числе и внутри конструкторов сайтов, а использовать ссылку на просмотр можно на любых ресурсах, будь то сайт, социальная сеть или форум.