Создание 3D-модели для конфигуратора

Недавно я сделал пару 3D моделей для страницы настройки конфигуратора, поэтому решил задокументировать процесс их загрузки в iNav.

Предварительные требования

• Ваш любимый пакет для 3D моделирования. Вы можете использовать любой, если вы можете экспортировать в файлы .obj или любой другой формат, который можно импортировать в Blender.
• Blender 2.79. Эта версия необходима для экспортера JSON.
• Three.js версии 0.92. Это последняя версия с включенным аддоном Blender.

Установка Three.js

• Установите Blender.
• Извлеките zip-файл Three.js и перейдите в /three.js-r92/utils/exporters/blender/addons
• Скопируйте папку io_three и перейдите к install_drive://Program Files/Blender Foundation/Blender/2.79/scripts/addons
• Вставьте папку io_three в папку addons Blender.
• Откройте Blender и из меню перейдите в File > User Preferences...
• Перейдите на вкладку Addons и введите Thr в поле поиска.
• Отметьте флажок, чтобы включить аддон Three.js, затем нажмите кнопку Save User Settings.

Создание модели

Создайте модель в вашем любимом пакете для 3D моделирования. Я использую Fusion 360 и создаю довольно большие модели. Размер не имеет значения, его можно изменить в Blender. Я просто создал модель, объединил большинство частей и добавил цвет там, где хотел. Раздражает то, что материалы не переносятся в Blender. Но проще настроить всё с помощью пакета, с которым вам удобно работать. Также настоятельно рекомендую называть каждый объект в модели, так как это упростит работу позже. Я также называю материалы, поскольку уверен, что Blender понимает названия материалов. Как только вы будете довольны моделью, экспортируйте её в виде файла .obj.

Базовая модификация в Blender

Откройте Blender и импортируйте ваш .obj файл. Это должно быть довольно просто.

Масштабирование

Но если ваша модель большая, вы можете просто увидеть заблокированную камеру. Если это так, переключитесь на вид сверху (снизу, слева, справа, спереди или сзади); доступ к нему осуществляется из меню «Вид» в нижнем левом углу экрана рядом с кубом 3D.

В этот момент вы должны иметь возможность использовать клавиши + и - на цифровой клавиатуре для увеличения и уменьшения масштаба. Уменьшите масштаб, пока не увидите всю модель. Затем нажмите кнопку Scale и перемещайте мышь, чтобы изменить размер модели. Вы хотите уменьшить её до тех пор, пока не сможете увидеть область сетки под ней. Хороший размер, кажется, составляет около 2,75 пустых квадратов сетки вокруг самых больших размеров.

Вращение

На этом этапе ваша модель должна быть нужного размера. Однако она может быть повёрнута неправильно. С точки зрения вида Top вы должны смотреть вниз на верхнюю часть вашей модели. Однако при использовании вида Front я обнаружил, что смотреть на заднюю часть модели — это правильный способ для Configurator. Чтобы повернуть вашу модель, нажмите кнопку Rotate и переместите мышь. Если вы удерживаете клавишу shift, у вас будет более точный контроль.

Материалы

Далее вы захотите воспроизвести материалы, которые вы выбрали при разработке модели. Я не буду вдаваться в подробности, но выберите часть, которую вы хотите отредактировать, из списка в правом верхнем углу экрана. Ниже находится меню кнопок для того, что вы можете изменить. Найдите 3D сферу и нажмите на неё. Там вы найдёте редактор материалов, где вы можете изменять цвета и т. д.

Объединение

Заключительный этап перед экспортом модели — объединение всех отдельных частей. Вы всё ещё можете редактировать вещи после этого. Но если вы этого не сделаете, вы экспортируете только последнюю выбранную часть. Сначала выберите все части 3D модели, которые вы хотите видеть в конфигураторе. Нажмите на треугольник слева от имени объекта в списке объектов в правом верхнем углу экрана. Удерживайте клавишу shift для выбора нескольких элементов. После этого... Все они выбраны, удерживайте Ctrl и нажмите J. Части должны теперь соединиться, и вы увидите только один объект в списке (объекты, которые не были выбраны для объединения, конечно, останутся). Если это не сработало, попробуйте снова нажать Ctrl + J, так как иногда мне приходилось отдавать команду дважды.

Экспорт модели в JSON

Выберите объединённый объект и перейдите в верхнее меню Файл > Экспорт > Three.js (.json). Выбор папки экспорта и присвоение ей имени должно быть довольно простым. Однако вам понадобятся настройки экспорта Export THREE. Они хорошо работали у меня.

Вы можете поместить модель .json в папку Configurator /resources/models/ и изменить код для отображения модели.