Página web interactiva de paisaje 3D: valle japonés de cerezos en flor

Crea directamente una página web de paisaje 3D de alta calidad que permita interactuar en tiempo real desde el navegador. Tema: valle japonés de cerezos en flor. Utiliza HTML, CSS y JavaScript. No generes imágenes ni entregues únicamente una propuesta de diseño; no simules el 3D con una sola imagen de fondo y un efecto de paralaje. Necesito un producto final que funcione y pueda recorrerse de verdad. 【1. Enfoque de la obra】 Debe ser un paisaje de valle completo y continuo, con profundidad y capas claramente diferenciadas, no una decoración aislada, una isla flotante, una maqueta sobre una base ni una simple demostración técnica. El estilo debe ser voxel art moderno y detallado: conserva el lenguaje formal de la geometría cúbica, pero la imagen debe tener alta resolución, antialiasing y una iluminación y unas sombras refinadas. No uses pixelado retro de baja resolución, no apiles bloques grandes y toscos ni apliques un filtro de píxeles a la imagen. La calidad visual es prioritaria. Es preferible ofrecer algunas funciones menos que sacrificar la composición, los materiales y la iluminación. 【2. Uso de las imágenes de referencia】 Si se adjuntan imágenes de referencia, analiza primero sus capas compositivas, escala, iluminación y relaciones de color. Toma únicamente la atmósfera y el lenguaje visual como referencia, y rediseña la escena; no copies la posición de los edificios, árboles, montañas y caminos ni hagas una réplica 1:1. La imagen de referencia no es un recurso de fondo para la página web. La escena debe estar compuesta por geometría 3D real. 【3. Composición de la escena】 Al abrirse, debe mostrar de inmediato una imagen completa y atractiva, sin obligar al usuario a girar primero la cámara para encontrar un ángulo interesante. Utiliza una cámara en perspectiva, no una cámara isométrica cenital propia de una maqueta. La imagen debe tener un primer plano, un plano medio y un fondo claramente definidos: Primer plano: un antiguo cerezo de fuerte presencia, acompañado de rocas, hierbas, un farol de piedra y algunas flores caídas, para crear un enmarcado natural en el borde de la imagen, sin ocultar el río, el puente ni los edificios principales. Plano medio: un río serpenteante que guíe la mirada hacia el interior de la escena, con un puente de madera roja que lo cruce; la aldea, la casa de té, el santuario y los senderos deben distribuirse siguiendo el terreno, con conexiones de paso reales entre los edificios. El suelo debe presentar desniveles, orillas y transiciones naturales, no modelos colocados de manera uniforme sobre una superficie plana. Fondo: una pagoda de varios niveles en la ladera, bosques y crestas montañosas a distintas distancias, además de montañas nevadas en la lejanía. Representa la distancia mediante variaciones de escala, oclusión, cambios de temperatura de color y perspectiva atmosférica, en lugar de limitarte a reducir el tamaño de los objetos lejanos. No distribuyas todos los elementos de manera uniforme por toda la escena. Debe haber jerarquía, variación de densidad, espacios vacíos y un foco visual claro. 【4. Modelado y calidad de imagen】 Cerezos: los troncos deben tener cambios de dirección, bifurcaciones y raíces; las copas deben estar formadas por grupos irregulares de flores, con huecos, variaciones de grosor y ramas visibles. No los conviertas en unas cuantas esferas o masas cúbicas regulares. Edificios: los tejados deben incluir hileras superpuestas de tejas, aleros, vigas, pilares y celosías; los distintos edificios deben variar en función, volumen y altura. No repitas la misma casa por todo el valle. Terreno: en las orillas debe haber piedras húmedas, hierba y transiciones de vegetación. Evita escalones demasiado regulares, franjas repetitivas, patrones de tablero de ajedrez y una cuadrícula procedural evidente. Agua: debe reflejar el entorno, con ondulaciones moderadas, variaciones de profundidad y una transición natural en las orillas. Utiliza reflejos de la escena real siempre que sea posible; si es necesario reducir la calidad para mejorar el rendimiento, conserva una apariencia visual creíble. No sustituyas el agua por ruido parpadeante, distorsiones intensas ni una superficie azul uniforme. Detalles: puedes incluir algunos peces koi, flores caídas, luciérnagas, una cascada y aves volando a lo lejos, pero todos deben contribuir a la atmósfera sin volver la imagen caótica. No amontones detalles solo para presumir de la cantidad de modelos. 【5. Color y atmósfera】 La atmósfera predeterminada debe ser la hora azul: un valle y unas montañas lejanas de tonos fríos, cerezos de un rosa suave y la luz cálida, pero sin sobreexposición, de los faroles y las ventanas. Concentra la luz cálida en las zonas donde haya actividad humana; no tiñas todo el entorno de naranja. Necesito sombras suaves, oclusión ambiental en las zonas de contacto, una exposición adecuada, un bloom moderado, antialiasing y una niebla sutil con profundidad atmosférica. Evita una imagen blanquecina, gris y apagada, la sobresaturación, una niebla densa que cubra toda la pantalla, luces sobreexpuestas y un aliasing evidente. La geometría cúbica puede ser nítida, pero el renderizado no debe verse tosco. Ofrece también las atmósferas «amanecer» y «lluvia»; al cambiar entre ellas deben modificarse simultáneamente el cielo, la luz ambiental, la niebla y los efectos locales, no limitarse a cambiar el color del fondo. 【6. Interacción e interfaz】 Incluye cuatro cámaras diseñadas específicamente: panorámica del valle, vista baja junto al río, sendero del templo y vista elevada desde la ladera. El cambio debe ser fluido y cada cámara debe aportar un valor compositivo propio. Interacción básica: arrastrar con el ratón para observar y usar la rueda para hacer zoom o avanzar; en pantallas táctiles, admite arrastre y zoom con dos dedos. Incluye funciones para restablecer la vista, ocultar la interfaz y guardar la imagen actual. Mejoras opcionales: exploración libre, recorrido lento de la cámara y sonido ambiental. El sonido ambiental debe estar desactivado por defecto y reproducirse solo después de que el usuario haga clic. Las funciones adicionales no deben afectar a la calidad de la imagen predeterminada. La interfaz debe ser discreta y estar bien diseñada, con el paisaje como protagonista. Coloca el título y la barra de controles en los bordes, sin tapar el foco visual. Tanto en escritorio como en móvil, evita que los botones se salgan de la pantalla, que el texto se superponga o que haya elementos imposibles de usar. 【7. Ingeniería y rendimiento】 Puedes utilizar Three.js / WebGL y dependencias CDN con versiones fijas y compatibles entre sí. Da prioridad a capacidades de renderizado consolidadas; no reescribas un motor completo solo para lograr «cero dependencias». Organiza, en la medida de lo posible, el HTML, CSS y JavaScript escritos específicamente para el proyecto en un único archivo HTML. Genera el paisaje mediante geometría y materiales procedurales, sin depender de imágenes externas ni recursos de modelos 3D. Para los objetos repetidos, utiliza métodos adecuados de renderizado por lotes o instanciado; controla de forma razonable la teselación, las sombras, los reflejos y la resolución de renderizado. Ofrece un modo de alta calidad y otro ligero; en móviles, utiliza por defecto una configuración más liviana. No aumentes indefinidamente la cantidad de vóxeles para obtener más detalle. Añade un indicador de carga, un aviso cuando WebGL no sea compatible y la gestión de errores necesaria. No reproduzcas sonido automáticamente si el usuario no lo ha activado; respeta la preferencia del sistema para reducir el movimiento. 【8. Revisión antes de la entrega】 No entregues el proyecto inmediatamente después de terminar el código. Si el entorno permite ejecutar el proyecto en un navegador y hacer capturas de pantalla, abre primero la página de forma real, comprueba la cámara predeterminada, las cuatro vistas, los cambios de atmósfera y la distribución en escritorio y móvil, y después corrige, a partir de las capturas, los problemas evidentes de composición, exposición, oclusión y renderizado. Comprueba especialmente: si hay una pantalla en blanco, fallos de carga o errores en la consola; si aparecen intersecciones de geometría, parpadeos, bandas en las sombras, sobreexposición o anomalías en el agua; si la imagen predeterminada parece realmente un paisaje completo y no una maqueta pequeña; y si los botones funcionan de verdad y no se salen de la pantalla en dispositivos móviles. Puedes utilizar capturas de pantalla del navegador para la revisión, pero no llames a herramientas de generación de imágenes. Describe honestamente las pruebas que no se hayan completado; no afirmes que has verificado algo que no hayas comprobado. Entrega final: 1. Un archivo HTML que exista y pueda abrirse, o una vista previa interactiva compatible con el entorno actual. 2. Si es posible hacer capturas, adjunta una captura real del renderizado en el navegador. 3. Explica brevemente los controles y las condiciones de ejecución necesarias. Completa directamente la creación; toma por tu cuenta decisiones de diseño coherentes para los detalles no esenciales, y no me devuelvas repetidamente problemas de implementación que puedas resolver por tu cuenta.