Как да импортирате 3D Blender обект в проект Three.js като glTF файл

Ако кодирате 3D визуализации с Three.js, рано или късно ще искате да преминете отвъд използването на основните естествени форми на библиотеката и да започнете да използвате сложни персонализирани 3D обекти, увити в материал с UV карта.

Blender е фантастичен безплатен софтуер с отворен код за създаване на красиви 3D обекти. Тъй като Three.js отказа поддръжката на своя плъгин за износител Blender, за да разчита на своя GLTF зареждач, експортът чрез популярния и универсален GLTF файлов формат вече е начинът за въвеждане на обекти Blender във вашите проекти Three.js.

Този урок ще премине през всяка стъпка от създаването на 3D.js-съвместим UV-обвит 3D обект в Blender до зареждане на обекта в сцена Three.js. Ето какво ще покрием:

Част 1: Създаване на 3D обект, съвместим с Three.js, UV Mapped 3D обект в Blender

Част 2: Импортиране на UV изображение в Blender като glTF материал

Част 3: Експорт на glTF файла от Blender

Част 4: Зареждане на файла glTF в сценарий Three.js

Част 1: Създаване на 3D обект, съвместим с Three.js, UV Mapped 3D обект в Blender

Този урок ще използва Bus Derby, 3D игра, базирана на браузър, създадена с Three.js, за да предостави примери за всяка стъпка. Играта и целият изходен код можете да намерите на CodePen тук или на GitHub тук за справка. (Проучването на дизайна също е достъпно на Behance тук.)

Ще използваме това изображение на шината като модел, за да основаваме нашия 3D Blender обект.

За начало първо трябва да имате 3D обект, оформен в Blender. Този урок няма да обхваща подробностите за използването на софтуера за създаване на форми. Ако сте нов в Blender, има множество съществуващи уроци, които да ви доведат до скорост. Препоръчвам този урок за начинаещи за Blender за YouTube. Когато започнах проекта за автобусен дерби, почти не чух Blender и поредицата ми даде ноу-хау за създаването на тази форма на тялото на автобуса отдолу, която ще използваме като пример.

Развиване на UV лъчи в Blender за създаване на UV карта

Ако вече сте запознати с разгръщането на ултравиолетови лъчи, продължете напред и прескочете до Част 2. Ако не, придържайте се. Първата стъпка към отвиването на UV в Blender е отварянето на нова област като UV / Image Editor.

Натиснете TAB, за да превключите в режим на редактиране, след това “A”, за да изберете всички. Натиснете „U“ (за отвиване), след което изберете Smart UV Project. Натиснете „Добре“, за да приемете настройките по подразбиране. Това автоматично ще отвие UV лъчите и ще ги постави на UV картата.

(Освен това, за по-голям контрол върху това как Blender разгръща UV, можете да посочите шевовете. Изберете ръбовете, където искате да бъдат шевовете, натиснете CONTROL-E, след това изберете маркиране на шевовете. Шевовете ще се появят като червени ръбове. Когато всички от шевовете са маркирани, натиснете „U“, след това изберете Unwrap.)

Експортиране на UV картата като PNG файл

Позиционирайте сегментите на UV картата по начин, с който ще бъде лесно да се работи при създаването на изображенията. Групирайте ги по техния очакван цвят и ги подредете относително, така че да е ясно как всеки сегмент съответства на 3D формата. (Изберете режима „остров“, за лесно да изберете и преместите изолирани сегменти.)

Натиснете „A“, за да се уверите, че е избрана цялата карта. Отворете менюто „UVs“ в долната част на UV / Image Editor и изберете Експортиране на UV оформление. Въведете името и местоположението на файла, след което щракнете върху бутона „Експортиране на UV оформление“. Това ще експортира .png изображение на UV картата очертае върху прозрачен фон.

Създаване на UV изображение с софтуер за редактиране на изображения

Отворете експортирания .png файл във всеки софтуер за редактиране на изображения като Sketch, Illustrator или Photoshop. Добавете нов слой на изображението под UV картата и попълнете очертанията с всяка комбинация от цвят, илюстрация или снимки. Когато приключите с изображението, скрийте или изтрийте слоя с UV карта и експортирайте като нов файл с изображение в същата директория като файла .blend.

Част 2: Импортиране на UV изображение в Blender като glTF материал

За да импортираме UV изображението .png в Blender по начин, който е съвместим с експортирането в Three.js, ще трябва да въведем приставката на KhronosGroup glTF Blender Exporter. За целта клонирайте или изтеглете износителя от GitHub в същата директория като файла .blend и го разархивирайте.

Върнете се в Blender, добавете материала на glTF Blender Exporter на файла glTF Metallic Roughness. За да направите това, отидете на File> Append, след това отворете glTF-Blender-Exporter-master / pbr_node / glTF2.blend / NodeTree и изберете материала glTF Metalic Roughness. (Ще използваме този материал в ръководството, но ако искате можете да повторите тази стъпка, за да добавите и материала glTF Specular Glossiness, който е съвместим и с Three.js)

Изберете Cycles Render от менюто в горната лента.

Сега отворете още една нова област като редактор на възли.

В панела Properties от дясната страна на интерфейса Blender изберете дисплея Material и дайте на материала разпознаваемо име. Тук ще го наречем „bus_material“.

В редактора на възела Добавете нов възел от материал Metal Metal Roughness glTF. За да направите това, отидете на Add> Group> glTF Metallic Roughess и поставете новия glTF Metal Metal Roughness възел.

Изтрийте „Дифузния BSDF възел“. Просто го изберете и натиснете „X“.

Добавете нов възел за текстура на изображението. Отидете на Добавяне> Текстура> Текстура на изображението и поставете новия възел. След това, върху новия възел на текстурата на изображението, отидете на Отваряне> изберете UV изображение и изберете вашия файл с UV изображение.

Свържете съответно цветовите и алфа конекторите на текстура на изображението към конекторите BaseColor и Alpha на възлите glTF Metallic Roughness. Свържете шейдърния съединител на възела glTF Metallic Roughness към съединителния съединител на възела Material Output.

В редактора на 3D изглед сега трябва да видите UV изображението, прожектирано върху 3D формата. Изглежда доста добре.

Регулирайте MetallicFactor и RoughnessFactor на възела glTF Metallic Roughness по желание.

Част 3: Експорт на glTF файла от Blender

За да изпратим обекта към нашия проект Three.js, първо трябва да насочим Blender към сценария Khronos glTF Blender Exporter. За да направите това, отидете на Файл> Потребителски предпочитания, за да отворите прозореца с потребителски предпочитания. В раздела File щракнете върху иконата на папката „Scripts“. Отворете glTF-Blender-Exporter-master / script, и кликнете върху бутона „Accept“. Кликнете върху бутона „Запазване на потребителските настройки“. Затворете прозореца с потребителски предпочитания.

Запазете, затворете Blender и отново отворете Blender, за да може плъгинът да се запази.

Добавете формат glTF 2.0 към Blender. Върнете се към Файл> Предпочитания на потребителя. Този път отворете раздела „Добавки“. Използвайте лентата за търсене, за да търсите „glTF“, след това поставете отметка в „Import-Export: glTF 2.0 формат“. Щракнете върху бутона „Запазване на потребителските настройки“ и затворете прозореца.

Сега сме готови да експортираме glTF като .glb файл, съвместим с Three.js. Отидете на Файл> Експорт> glTF 2.0 (.glb). Поставете отметка „Експортиране на всички слоеве“, „Експортиране на материали“, „Експортиране на текстурни координати“, „Експортиране на нормали“ и всички други свойства, които ще трябва да включите за вашия проект. Дайте на файла подходящо име. Викам моя „bus_body_green.glb“. Отидете до мястото, където искате да запазите файла, и натиснете бутона „Експортиране на glTF 2.0 двоичен“.

Част 4: Зареждане на файла glTF в сценарий Three.js

И накрая, ние сме готови да заредим 3D обекта във вашия проект Three.js. (Разгледайте примера на Bus Derby в CodePen или репортажа на GitHub за по-пълен контекст на кода.)

В индексиращия HTML файл на приложението ви на приложението Three.js добавете източника на библиотека на Three.js glTF за зареждане.

Накрая създайте нов обект за зареждане на glTF. Заредете файла .glb и приложете 3D обекта (който живее на `gltf.scene.children [0] ') към обект, който ще бъде добавен към сцената. Позиция и мащаб според нуждите. В примера аз също прикрепям тялото на шината към вече присъстващ обект на рамката на шината, така че тялото да се движи заедно с шината. За статичен glTF обект можете просто да го добавите директно към сцената.

var loader = нов THREE.GLTFLoader ();
loader.load (
   "/Path/to/bus_body_green.glb",
   функция (gltf) {
      вар мащаб = 5.6;
      bus.body = gltf.scene.children [0];
      bus.body.name = “body”;
      bus.body.rotation.set (0, -1.5708, 0);
      bus.body.scale.set (мащаб, мащаб, мащаб);
      bus.body.position.set (0, 3.6, 0);
      bus.body.castShadow = true;
      bus.frame.add (bus.body);
   }
);
scene.add (bus.frame)

Това е! Вкарахте вашия 3D Blender обект във вашия проект Three.js. Добре сте да отидете. :)

Matthew Main е потребителски интерфейс и дигитален дизайнер в Ню Йорк. Следвайте в Twitter, Codepen, GitHub, Behance.