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

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