Захопливий 3D-сайт із рисовим полем

Створіть захопливий сайт із 3D-рисовим полем, який працює в браузері, з такою темою: «Море зелені / Вітер над рисовими полями». Завершіть код, встановіть потрібні залежності та запустіть попередній перегляд. Не обмежуйтеся пропозицією чи планом реалізації. 1. Візуальний напрям Загальна атмосфера має бути природною, спокійною та вишуканою — як в інтерактивного ландшафтного сайту з цілісним художнім оформленням. Сцена має містити: Передній план: чітко розрізнювані тонкі листки, вигнуті стебла та кілька пониклих волотей рису. Середній план: суцільне рисове поле, що простягається вдалину, із достатньою щільністю рослин і природними варіаціями відстані між ними. Фон: нерівна лінія дерев, кілька шарів невисоких пагорбів і ледь помітна атмосферна перспектива. Небо: м’які сіро-блакитні тони, легка мінливість хмар і природний перехід на горизонті. Розташуйте камеру за замовчуванням трохи вище за волоті рису, спрямованою через поле на далекі пагорби. Небо має займати приблизно третину кадру, а рисове поле — домінувати в композиції. Переважно використовуйте темно-зелені, оливково-зелені та жовто-зелені кольори рослинності. Уникайте флуоресцентного зеленого. Природно варіюйте висоту, орієнтацію, вигин і колір рослин рису. 2. Вимоги до анімації Вітер має проявлятися як безперервні хвилі, що рухаються вбік через усе поле: Корені мають залишатися переважно нерухомими, а рух — поступово посилюватися в напрямку кінчиків листків і волотей. Рослини на одній ділянці мають рухатися узгоджено, але зберігати індивідуальні відмінності. Поєднайте повільні великомасштабні хвилі вітру з ледь помітними локальними коливаннями. Не змушуйте всі рослини хитатися ідеально синхронно. Не переміщуйте рослини цілком і не допускайте мерехтіння листків. Вітер за замовчуванням має бути легким і комфортним для тривалого перегляду. 3. Вимоги до взаємодії Додайте прості елементи керування, які справді впливають на сцену: Повзунок швидкості вітру: плавно регулює силу та швидкість анімації вітру. Режими освітлення: Ранок, День і Золота година. Узгоджено змінюйте небо, напрямок світла, колірну температуру та колір туману. Режими огляду: Відкрите поле та Серед рису, із плавними переходами камери. Пауза/продовження: призупиняє та відновлює анімацію довкілля. Рух миші може спричиняти дуже легку реакцію камери, але не має викликати запаморочення. За замовчуванням не обертайте камеру безперервно на великі кути. 4. Дизайн інтерфейсу Використайте повноекранну сцену з інтерфейсом поверх неї: Угорі ліворуч: невеликий логотип VERDANT. Унизу ліворуч: заголовок із зарубками «Море зелені». Під ним — менший підзаголовок «Нічого робити не треба. Просто стежте за вітром». Унизу праворуч: компактна напівпрозора панель керування темно-зеленого кольору. Текст має залишатися читабельним; передбачте достатньо вільного простору й не перекривайте елементами керування основний пейзаж. Елементи керування мають залишатися зручними на вузьких екранах і не накладатися один на одного. 5. Технології та продуктивність Використайте Three.js. Якщо вже є готовий проєкт, збережіть його середовище збірки. Використовуйте інстансинг і вершинну анімацію на GPU для роботи з великою кількістю рослинності. Не створюйте окремий об’єкт відрисовування для кожної рослини й не оновлюйте кожну рослину на CPU в кожному кадрі. Зменшуйте деталізацію рослинності на великих відстанях і встановіть розумне обмеження співвідношення пікселів. Надавайте перевагу процедурній геометрії та матеріалам, щоб забезпечити надійне завантаження ресурсів. Сцена має відтворюватися в реальному часі. Не використовуйте повноекранне зображення чи відео пейзажу як основну сцену. Назви моделей і підписи для порівняння буде додано на етапі постпродакшену; не додавайте їх до сцени. 6. Критерії завершення Після реалізації скористайтеся доступними інструментами браузера, щоб перевірити: Початковий вигляд відображається коректно, без очевидних помилок у консолі. Кожен елемент керування справді впливає на сцену. Передній, середній і задній плани мають чітко розрізнятися за глибиною та пошаровістю. Рослини рису не мають виглядати просто як вертикальні зелені лінії. Рух вітру має бути безперервним і природним, без очевидного одноманітного повторення. Переходи камери мають бути плавними, а інтерфейс — зручним на вузьких екранах. Якщо ви не можете виконати певну перевірку, чітко повідомте про це. Насамкінець надайте інструкції із запуску та підсумок фактично реалізованих функцій.