Иммерсивный 3D-сайт с рисовыми полями

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