Sitio web inmersivo en 3D sobre un arrozal

Crea un sitio web inmersivo en 3D sobre un arrozal que se ejecute en el navegador, con el tema: “Un mar de verde / El viento entre los arrozales”. Completa el código, instala las dependencias necesarias y lanza una vista previa. No te detengas en una propuesta o un plan de implementación. 1. Dirección visual La atmósfera general debe sentirse natural, serena y refinada, como un sitio web de paisaje interactivo con una dirección artística coherente. La escena debe incluir: Primer plano: hojas delgadas claramente distinguibles, tallos curvados y algunas panículas de arroz inclinadas. Plano medio: un arrozal continuo que se extienda hacia la distancia, con suficiente densidad y variaciones naturales en el espaciado. Fondo: una línea irregular de árboles, colinas bajas superpuestas y una sutil perspectiva atmosférica. Cielo: tonos gris azulado suaves, variaciones sutiles en las nubes y una transición natural en el horizonte. Coloca la cámara predeterminada ligeramente por encima de las panículas de arroz, orientada a través del campo hacia las colinas lejanas. El cielo debe ocupar aproximadamente un tercio del encuadre, mientras que el arrozal debe dominar la composición. Usa principalmente colores de vegetación verde oscuro, verde oliva y verde amarillento. Evita el verde fluorescente. Varía de forma natural la altura, orientación, curvatura y color de las plantas de arroz. 2. Requisitos de animación El viento debe verse como ondas continuas que se desplazan lateralmente por el campo: Mantén las raíces prácticamente fijas, con un movimiento progresivamente más intenso hacia las puntas de las hojas y las panículas. Las plantas de una misma zona deben moverse de forma coherente, pero conservando variaciones individuales. Combina ondas de viento lentas y de gran escala con perturbaciones locales sutiles. Evita que todas las plantas se balanceen en sincronía perfecta. No traslades plantas completas ni hagas que las hojas parpadeen. Usa una brisa suave predeterminada que resulte agradable de observar durante periodos prolongados. 3. Requisitos de interacción Incluye controles sencillos que afecten realmente a la escena: Deslizador de velocidad del viento: ajusta suavemente la intensidad y la velocidad de la animación del viento. Modos de iluminación: Mañana, Tarde y Hora dorada. Coordina los cambios del cielo, la dirección de la luz, la temperatura de color y el color de la niebla. Modos de vista: Campo abierto y Entre los arrozales, con transiciones de cámara suaves. Pausa/Reanudar: pausa y reanuda la animación ambiental. El movimiento del ratón puede producir una respuesta muy sutil de la cámara, pero no debe causar mareo. No hagas que la cámara rote continuamente en ángulos amplios de forma predeterminada. 4. Diseño de la interfaz Usa una escena a pantalla completa con una interfaz superpuesta: Esquina superior izquierda: un pequeño logotipo con la palabra VERDANT. Esquina inferior izquierda: el encabezado con serifas “Un mar de verde”. Debajo, el subtítulo más pequeño “No hay nada que hacer. Solo sigue la brisa”. Esquina inferior derecha: un panel de control compacto, semitransparente y de color verde oscuro. Mantén el texto legible, proporciona un espaciado generoso y evita que los controles obstruyan el paisaje principal. Los controles deben seguir siendo utilizables en pantallas estrechas y no superponerse. 5. Tecnología y rendimiento Usa Three.js. Si ya existe un proyecto, conserva su entorno de compilación. Usa instanciación y animación de vértices en la GPU para gestionar grandes cantidades de vegetación. Evita crear un objeto de dibujo independiente para cada planta o actualizar cada planta en la CPU en cada fotograma. Reduce el nivel de detalle de la vegetación a mayores distancias y aplica un límite razonable a la densidad de píxeles. Prioriza la geometría y los materiales procedurales para garantizar una carga fiable de los recursos. La escena debe renderizarse en tiempo real. No uses una imagen o un vídeo de paisaje a pantalla completa como escena principal. Los nombres de los modelos y las etiquetas de comparación se añadirán en posproducción; no los incluyas en la escena. 6. Criterios de finalización Después de la implementación, usa las herramientas disponibles del navegador para comprobar que: La vista inicial se renderiza correctamente, sin errores evidentes en la consola. Todos los controles afectan realmente a la escena. El primer plano, el plano medio y el fondo tienen una profundidad y una estratificación claramente diferenciables. Las plantas de arroz son más que simples líneas verdes verticales. El movimiento del viento es continuo y natural, sin repeticiones uniformes evidentes. Las transiciones de cámara son suaves y la interfaz sigue siendo utilizable en pantallas estrechas. Si no puedes realizar alguna comprobación concreta, indícalo claramente. Por último, proporciona instrucciones de inicio y un resumen de las funciones implementadas realmente.