Інтерактивна воксельна сцена з лицарем і багаттям

Ви — старший розробник креативних WebGL- і Three.js-проєктів. Ваше завдання — створити повну, готову до використання інтерактивну 3D-сцену, цілком розміщену в одному автономному HTML-файлі (index.html) із використанням Three.js + WebGL ### 1. Візуальна тема й художній напрям - Атмосфера: глибока ніч у лісі, затишне сяйво багаття, самотній втомлений лицар, який відпочиває в таборі (естетика багаття Dark Souls / класичної ретро-RPG). - Стиль: 3D-піксель-арт / воксельний / low-poly. - Шейдинг і постобробка: інтегруйте постобробку Three.js (RenderPixelatedPass або еквівалентний ефект пікселізації/дизерингу з низькою роздільною здатністю), щоб отримати автентичний ретро-вигляд у стилі 16-/32-бітних ігор. ### 2. Геометрія сцени й ресурси (100% процедурно — без зовнішніх файлів .gltf/.obj) Усі ресурси потрібно створювати процедурно за допомогою геометричних примітивів Three.js (BoxGeometry, CylinderGeometry тощо) і базових матеріалів, щоб файл запускався локально без проблем із CORS. 1. Лісове оточення: - Земля: темний стилізований ландшафт із процедурними воксельними каменями, грибами та low-poly-рослинністю. - Дерева: процедурні сосни/ялини або блокові дерева з кронами, що оточують галявину та створюють відчуття глибини й усамітнення. - Небо й освітлення: глибоке опівнічне небо з мерехтливими воксельними зорями та холодне місячне світло DirectionalLight, що відкидає м’які тіні. - Глибина: THREE.FogExp2 із темним атмосферним кольором для злиття горизонту з оточенням. 2. Багаття: - Кам’яне кільце навколо жаринних колод і процедурних іскор. - Система вогню: анімовані піксельні частинки (Points або воксельні сіти з пульсацією), що підіймаються вгору. - Динамічне освітлення: тепле оранжево-червоне PointLight із безперервним природним мерехтінням (за допомогою Math.sin, шуму або псевдовипадкових варіацій). 3. Лицар: - Ієрархічний граф сцени (групи для голови, тулуба, верхньої та нижньої частин рук, ніг, плаща й меча), створений із вокселізованих примітивів. - Візуальні деталі: шолом із прорізами, нагрудна броня, наплічники, рукавиці та піхви/меч. - Точки обертання мають бути правильно вирівняні в місцях з’єднання (плечі, лікті, стегна, коліна) для коректних процедурних анімацій обертання. ### 3. Машина станів інтерактивного лицаря Реалізуйте плавні процедурні анімації за допомогою лінійної інтерполяції (lerp) або тригонометричних кривих у циклі рендерингу для наведених нижче станів, які можна вибирати: - Сидіти біля багаття (типовий режим очікування): сидить, схрестивши ноги або навпочіпки, ледь помітно дихає та гріє руки біля полум’я. - Додати дрова: лицар підводиться, бере колоду й кидає її у вогонь. Полум’я помітно спалахує, радіус освітлення тимчасово збільшується, а в повітря злітає феєрверк іскор. - Вправи з мечем: підводиться, вихоплює меч, виконує чітку триетапну комбінацію атаки та парирування й повертається у бойову стійку. - Дивитися вдалину: підходить до краю галявини, встромляє меч у землю й дивиться в темряву, поки плащ коливається на вітрі. - Сон: лягає на спальник біля багаття; над шоломом здіймаються анімовані піксельні частинки «Z z z». - Смажити м’ясо: тримає над полум’ям палицю з їжею; навколо здіймаються ледь помітні процедурні частинки диму/пари. ### 4. Система камер Додайте перемикання між пресетами камери з плавною інтерполяцією переходу (інтерполюйте положення й ціль): - Затишний крупний план: середній план із фокусом на лицарі та світлі багаття. - Ізометрична RPG: класичний тактичний огляд галявини згори під кутом 45°. - Кінематографічний ракурс із землі: драматичний план із нижнього ракурсу, де лицар височіє на тлі зоряного неба та соснових крон. - Вільне обертання: плавне перемикання на стандартний OrbitControls для інтерактивного огляду. ### 5. Інтерфейс і звук - Стиль інтерфейсу: ретро-HUD у стилі 8-/16-бітної RPG — напівпрозорі темні панелі з піксельними рамками та підключеним шрифтом Google (наприклад, 'Press Start 2P'). - Нижня панель: інтерактивні кнопки дій, що запускають кожен стан лицаря. - Панель у правому верхньому куті: кнопки перемикання ракурсів камери. - Лічильник дров: відстежує кількість доданих колод і поточну інтенсивність вогню. - Звук (Web Audio API): процедурно синтезовані потріскування вогню та атмосферні звуки нічного вітру/цвіркунів, а також кнопка вимкнення/увімкнення звуку. ### 6. Технічні характеристики - Один автономний файл index.html. - Використовуйте ES Modules, завантажені через CDN (https://t.co/W8o3SZwkCj або unpkg). - Модульна, добре прокоментована структура коду (initScene, buildEnvironment, buildKnight, buildCampfire, setupUI, setupAudio, animate). - Повністю адаптивний обробник зміни розміру вікна, який оновлює співвідношення сторін камери та роздільну здатність проходу пікселізації.