[Olena_Top]

Привіт! Минулого разу ми обговорювали код на Three.js для анімації персонажів. Але сьогодні я хочу підняти ще важливішу тему — **пайплайн і підготовку 3D-моделі**.

Найбільший біль фронтендера — це отримати від 3D-художника `.glb` файл, закинути його в браузер і зрозуміти, що ним неможливо керувати через JavaScript API. Тому ось чек-лист, як правильно підготувати персонажа в Blender, щоб з ним було приємно працювати в коді.

1. Правильний неймінг кісток (Rigging)
Якщо фронтендер хоче, щоб персонаж водив головою за мишкою (через подію `mousemove`), йому треба знайти цю кістку в коді: `scene.getObjectByName('Head')`.
Якщо ваша кістка в Blender називається `Bone.023` — це катастрофа.
Правило: Всі ключові кістки, якими буде керувати JS, мають називатися логічно: `Head`, `Neck`, `LeftArm`, `RightEye`.

2. Shape Keys (Morph Targets) для міміки
Щоб персонаж міг кліпати очима, посміхатися або говорити, не обов'язково робити складний скелет обличчя. Використовуйте Shape Keys у Blender. При експорті в GLTF вони перетворюються на `morphTargetInfluences`.
У JavaScript це виглядає так:

Код:

// 0 - звичайне обличчя, 1 - широка посмішка mesh.morphTargetInfluences[0] = 0.5; // напівпосмішка

Правило: Називайте ключі форм англійською (`smile`, `blink`, `sad`), щоб у JS до них можна було звернутися через словник `morphTargetDictionary`.

3. Пакування анімацій через NLA Editor
Персонаж повинен мати кілька станів: Idle (дихання), Walk, Wave (махати рукою). Якщо просто накидати ключі на таймлайн в Blender, JS отримає одну суцільну кашу.
Правило: Кожну дію (Action) потрібно 'запушити' (Push Down) у Non-Linear Animation (NLA) редакторі як окремий трек. Тоді при завантаженні моделі у Three.js розробник отримає масив незалежних кліпів `gltf.animations`, які зможе перемикати через `AnimationMixer`.

4. Apply Transforms (Скидання трансформацій)
Часто буває: завантажуєш персонажа, а він лежить обличчям в підлогу або гігантського розміру.
Правило: Перед експортом виділіть об'єкт в Blender і натисніть `Ctrl+A -> All Transforms`. Масштаб має бути [1, 1, 1], а ротація [0, 0, 0]. Також перевірте, щоб центр (Origin) об'єкта був у нього в ногах — так найзручніше ставити його на 'землю' в Three.js.

Ось такі прості правила 'контракту' між 3D-шником та Front-End розробником зекономлять вам десятки годин дебагу. Хто з якими ще 'сюрпризами' стикався при інтеграції моделей на сайт?

[Stas_Frontend]

О, цей пост треба роздрукувати і вішати в рамку в кожній студії!

Останній раз мені віддали модель машини, де всі колеса називалися просто `Cube.001`, `Cube.002`... А мені треба було прив'язати їхню швидкість обертання до скролу сторінки (через GSAP ScrollTrigger). Я витратив годину, просто щоб методом тику через `console.log` знайти, який куб за що відповідає.

[Kiber_Arkhitektor]

До речі, щодо п.4 (Apply Transforms) — це просто класика. Але є ще один нюанс: ієрархія (Parent-Child).

Дуже часто 3D-артисти залишають купу порожніх об'єктів (Null/Empty) у сцені Блендера, які слугують для угруповання. Але при експорті в WebGL кожен такий 'порожній' об'єкт стає `THREE.Group` і збільшує розмір графу сцени. Якщо їх сотні — рендерер починає страждати. Треба зводити (Bake) або об'єднувати (Join) статичну геометрію перед експортом.

[Yulia_JS]

Пункт про Shape Keys (Morph Targets) — це взагалі скарб. Ми нещодавно робили 3D-конфігуратор обличчя персонажа (як у іграх). Завдяки тому, що 3D-художник грамотно налаштував морфи в Blender (окремо повні щоки, окремо гостре підборіддя, зміна форми носа), ми просто прив'язали HTML-повзунки (input type='range') до `morphTargetInfluences` у Three.js.

Коду вийшло на 10 рядків, а результат виглядає магічно і працює без лагів навіть на телефонах.

[rullan]

Хлопці і дівчата, не забувайте ще про освітлення і матеріали!
Блендер використовує Cycles або Eevee, які по-своєму рахують світло. А Three.js — це realtime WebGL. Те, що красиво блищить у Блендері, на сайті може виглядати як пластиковий шматок мила.

Завжди 'запікайте' (Bake) базові тіні (Ambient Occlusion) прямо в текстуру. Це зекономить ресурси мобільного браузера (не треба рахувати складні тіні в реальному часі) і виглядатиме круто.

[Olena_Top]

@Max_Go, 100% згодна про запікання текстур (Baking). Це найкраща практика для вебу. Можна навіть запекти світло повністю (PBR -> Shadeless/Unlit), тоді в Three.js взагалі не треба додавати об'єкти освітлення (Light), що піднімає FPS до небес. Матеріал `MeshBasicMaterial` рендериться майже безкоштовно для процесора.