Інтерактивний 3D-ландшафт японської сакурової долини

Безпосередньо створіть повністю готову інтерактивну 3D-ландшафтну вебсторінку, якою можна користуватися в реальному часі у браузері. Тема: японська сакурова долина. Реалізуйте її за допомогою HTML, CSS і JavaScript. Не генеруйте зображення й не обмежуйтеся концепцією дизайну, не видавайте одне фонове зображення з ефектом паралаксу за 3D. Мені потрібен справді робочий, придатний для огляду готовий результат. 【1. Концепція роботи】 Це має бути цілісний, безперервний ландшафт долини з виразною глибиною та шарами переднього, середнього й дальнього планів, а не окрема декоративна модель, острів, що ширяє, діорама на підставці чи просто технічна демонстрація. Стиль — сучасне деталізоване воксельне мистецтво / voxel art: збережіть виразну мову кубічної геометрії, але зображення має бути високої роздільної здатності, зі згладжуванням і тонко опрацьованим світлом та тінями. Не використовуйте ретро-пікселізацію низької роздільної здатності, грубе нагромадження великих блоків чи піксельний фільтр поверх зображення. Візуальна якість має пріоритет. Краще відмовитися від кількох функцій, ніж пожертвувати композицією, матеріалами та освітленням. 【2. Використання референсних зображень】 Якщо додано референсні зображення, спочатку проаналізуйте їхню композицію, просторові шари, масштаб, освітлення та взаємозв’язок кольорів. Запозичуйте лише атмосферу й візуальну мову, а сцену спроєктуйте заново, не копіюйте розташування будівель, дерев, гір і доріг та не відтворюйте зображення у масштабі 1:1. Референсне зображення не є фоновим ресурсом вебсторінки. Сама сцена має складатися зі справжньої 3D-геометрії. 【3. Композиція сцени】 Після відкриття має одразу відображатися цілісна й приваблива композиція, щоб користувачеві не доводилося спочатку обертати камеру в пошуках вдалого ракурсу. Використовуйте перспективну камеру, а не ізометричну камеру з виглядом згори, як у діорамі. У кадрі мають бути чітко виражені передній, середній і дальній плани: Передній план: виразне старе дерево сакури з камінням, травами, рослинністю, кам’яним ліхтарем і кількома опалими пелюстками; вони мають утворювати природне обрамлення по краю кадру, але не перекривати річку, міст і головні будівлі. Середній план: звивиста річка веде погляд углиб кадру, а через неї перекинуто червоний дерев’яний міст; село, чайний будиночок, синтоїстське святилище та стежки розташовані відповідно до рельєфу, а між будівлями є реалістичні проходи. Поверхня землі має перепади висот, берегову лінію та природні переходи, а не рівномірно розставлені моделі на пласкій площині. Дальній план: багатоярусна пагода на схилі, ліси на різній відстані, гірські хребти та засніжені гори вдалині. Передавайте відстань зміною масштабу, перекриттям об’єктів, холоднішими й теплішими відтінками та атмосферною перспективою, а не просто зменшуйте віддалені об’єкти. Не заповнюйте всі ділянки елементами рівномірно. Потрібні ієрархія, варіація щільності, вільний простір і чіткий візуальний фокус. 【4. Форма та якість зображення】 Дерево сакури: стовбур має вигини, розгалуження й коріння, а крона — складатися з нерегулярних скупчень квітів із проміжками, різною товщиною та видимими гілками. Не перетворюйте її на кілька правильних сфер або кубічних грудок. Будівлі: дахи мають містити багатошарову черепицю, звиси, балки, колони та віконні ґрати; різні будівлі повинні відрізнятися призначенням, об’ємом і висотою — не заповнюйте долину копіями одного будинку. Рельєф: біля берегів мають бути вологі камені, зарості трави та плавний перехід до рослинності. Уникайте надто регулярних сходинок, повторюваних смуг, шахового візерунка й очевидної процедурної сітки. Вода: поверхня має відбивати навколишній пейзаж, містити помірні брижі, варіації глибини та природний перехід біля берегів. За можливості використовуйте відбиття реальної сцени; навіть у режимі зниження якості зображення має залишатися візуально переконливим. Не замінюйте воду мерехтливим шумом, сильними викривленнями чи суцільною синьою площиною. Деталі: можна додати кілька коропів кої, опалих пелюсток, світлячків, водоспад і птахів удалині, але всі вони мають працювати на атмосферу й не перевантажувати кадр. Не нагромаджуйте деталі лише заради заявленої кількості моделей. 【5. Кольори й атмосфера】 За замовчуванням використовуйте час синіх сутінків: прохолодна долина й далекі гори, ніжно-рожеві квіти сакури, тепле, але не пересвічене світло ліхтарів і вікон. Тепле світло має зосереджуватися в місцях присутності людей, а не забарвлювати все довкілля в помаранчевий. Потрібні м’які тіні, контактне затінення в місцях дотику об’єктів, коректна експозиція, стримане свічення, згладжування та легкий туман із виразною просторовою глибиною. Уникайте вибіленого зображення, сірого серпанку, надмірної насиченості, густого туману на весь екран, пересвіченого світла та помітних сходинок на контурах. Кубічна геометрія може бути чіткою, але сам рендеринг не має виглядати грубим. Додайте ще два атмосферні режими — «Ранній ранок» і «Під дощем»; під час перемикання мають одночасно змінюватися небо, навколишнє освітлення, туман і локальні ефекти, а не лише колір фону. 【6. Взаємодія та інтерфейс】 Передбачте чотири продумані ракурси камери: панорама долини, низький ракурс біля річки, стежка до храму та огляд зі схилу згори. Перемикання має бути плавним, а кожен ракурс — мати самостійну композиційну цінність. Базова взаємодія: перетягування мишею для огляду, прокручування коліщатка для наближення або руху вперед; на сенсорних екранах підтримайте перетягування та масштабування двома пальцями. Додайте скидання ракурсу, приховування інтерфейсу та збереження поточного кадру. Додаткові можливості: вільне дослідження, повільний обліт камери та звуки довкілля. Звуки довкілля мають бути вимкнені за замовчуванням і відтворюватися лише після явного натискання користувача. Додаткові функції не повинні погіршувати якість сцени за замовчуванням. Інтерфейс має бути стриманим і продуманим, із пріоритетом для ландшафту. Заголовок і панель керування розмістіть по краях, не перекриваючи візуальний фокус. На комп’ютерах і смартфонах не повинно бути виходу кнопок за межі екрана, накладання тексту чи недоступних елементів керування. 【7. Розробка та продуктивність】 Дозволено використовувати Three.js / WebGL, а також сумісні між собою залежності CDN із зафіксованими версіями. Віддавайте перевагу зрілим можливостям рендерингу, а не переписуйте цілий рушій заради «відсутності залежностей». Власні HTML, CSS і JavaScript за можливості організуйте в одному HTML-файлі. Сцену генеруйте за допомогою процедурної геометрії та матеріалів, не використовуючи зовнішні зображення чи ресурси 3D-моделей. Для повторюваних об’єктів використовуйте відповідний пакетний або інстансинговий рендеринг; розумно контролюйте рівень деталізації, тіні, відбиття та роздільну здатність рендерингу. Передбачте режими високої якості та полегшений режим; на смартфонах за замовчуванням використовуйте легші налаштування. Не збільшуйте кількість вокселів безмежно лише заради деталізації. Додайте індикатор завантаження, повідомлення про непідтримуваний WebGL і необхідну обробку помилок. Не запускайте звук автоматично, якщо його не ввімкнено; поважайте системне налаштування зменшення анімації. 【8. Перевірка перед передаванням результату】 Не передавайте результат одразу після написання коду. Якщо поточне середовище підтримує запуск у браузері та створення знімків екрана, спочатку відкрийте сторінку на практиці, перевірте початковий ракурс, усі чотири ракурси, перемикання атмосферних режимів, компонування на комп’ютері та смартфоні, а потім за знімками виправте очевидні проблеми композиції, експозиції, перекриття об’єктів і рендерингу. Особливо перевірте: чи немає порожнього кадру, помилок завантаження та помилок у консолі; чи немає проникнення геометрії, мерехтіння, смуг на тінях, пересвічення та аномалій на поверхні води; чи справді початковий кадр схожий на цілісний ландшафт, а не на маленьку діораму; чи працюють кнопки та чи не виходять елементи за межі екрана на мобільних пристроях. Для перевірки можна використовувати знімки екрана з браузера, але не викликайте інструменти генерації зображень. Якщо тестування не завершено, чесно повідомте про це й не стверджуйте, що все перевірено. Фінальний результат: 1. Фактично наявний HTML-файл, який можна відкрити, або інтерактивний попередній перегляд, якщо його підтримує поточне середовище. 2. Якщо створення знімків екрана доступне, додайте один справжній знімок рендерингу в браузері. 3. Коротко опишіть спосіб керування та необхідні умови запуску. Безпосередньо завершіть створення; для некритичних деталей самостійно ухвалюйте узгоджені дизайнерські рішення, не перекладайте на мене питання реалізації, які можете вирішити самостійно.