Paysage de rizières immersif en 3D

Créez un site immersif de rizières en 3D qui s’exécute dans le navigateur, sur le thème suivant :
« Une mer de verdure / Le vent dans les rizières. »
Terminez le code, installez les dépendances nécessaires et lancez un aperçu. Ne vous arrêtez pas à une proposition ou à un plan d’implémentation.

1. Direction artistique

L’atmosphère générale doit être naturelle, paisible et soignée, comme celle d’un site paysager interactif doté d’une direction artistique cohérente.

La scène doit inclure :

Premier plan : des feuilles fines clairement distinctes, des tiges courbées et quelques panicules de riz retombantes.

Plan intermédiaire : une rizière continue qui s’étend au loin, avec une densité suffisante et des variations naturelles dans l’espacement.
Arrière-plan : une lisière d’arbres irrégulière, des collines basses superposées et une perspective atmosphérique subtile.
Ciel : des tons gris bleuté doux, de légères variations nuageuses et une transition naturelle à l’horizon.
Placez la caméra par défaut légèrement au-dessus des panicules de riz, orientée à travers la rizière vers les collines lointaines.
Le ciel doit occuper environ un tiers du cadre, la rizière dominant la composition.
Utilisez principalement des tons de vert profond, de vert olive et de vert jaunâtre pour la végétation. Évitez le vert fluorescent.
Variez naturellement la hauteur, l’orientation, la courbure et la couleur des plants de riz.

2. Exigences d’animation
Le vent doit se manifester sous forme de vagues continues se propageant latéralement à travers la rizière :
Gardez les racines presque fixes, avec un mouvement progressivement plus marqué vers l’extrémité des feuilles et les panicules.
Les plants d’une même zone doivent bouger de manière cohérente tout en conservant des variations individuelles.

Combinez de lentes vagues de vent à grande échelle avec de subtiles perturbations locales.

Évitez que tous les plants se balancent en parfaite synchronisation. Ne déplacez pas les plants entiers et ne faites pas scintiller les feuilles.

Utilisez par défaut une brise légère, agréable à regarder dans la durée.
3. Exigences d’interaction
Proposez des contrôles simples qui influent réellement sur la scène :
Curseur de vitesse du vent : ajustez progressivement l’intensité et la vitesse de l’animation du vent.
Modes d’éclairage : Matin, Après-midi et Heure dorée. Coordonnez les changements du ciel, de la direction de la lumière, de la température de couleur et de la couleur du brouillard.

Modes de vue : Champ ouvert et Au milieu des rizières, avec des transitions fluides de la caméra.

Pause/Reprise : mettez en pause et reprenez l’animation de l’environnement.

Le mouvement de la souris peut entraîner une très légère réaction de la caméra, mais ne doit pas provoquer de sensation de vertige.
Par défaut, ne faites pas pivoter la caméra en continu sur de grands angles.
4. Design de l’interface
Utilisez une scène en plein écran avec une interface superposée :
En haut à gauche : un petit logotype VERDANT.

En bas à gauche : le titre avec empattements « Une mer de verdure. »
En dessous, le sous-titre plus petit « Rien à faire. Il suffit de suivre la brise. »
En bas à droite : un panneau de contrôle compact, semi-transparent et vert foncé.

Veillez à la lisibilité du texte, prévoyez des espacements généreux et évitez que les contrôles masquent le paysage principal.

Les contrôles doivent rester utilisables sur les écrans étroits, sans se chevaucher.

5. Technologie et performances
Utilisez Three.js. Si un projet existant est disponible, conservez son environnement de build.
Utilisez l’instanciation et l’animation des sommets sur le GPU pour gérer une grande quantité de végétation.
Évitez de créer un objet de rendu distinct pour chaque plant ou de mettre à jour chaque plant sur le CPU à chaque image.
Réduisez le niveau de détail de la végétation à grande distance et appliquez une limite raisonnable au ratio de pixels.
Privilégiez la géométrie et les matériaux procéduraux afin de garantir un chargement fiable des ressources.
La scène doit être rendue en temps réel. N’utilisez pas une image ou une vidéo panoramique comme scène principale.
Les noms des modèles et les libellés de comparaison seront ajoutés en postproduction ; ne les incluez pas dans la scène.
6. Critères de validation
Après l’implémentation, utilisez les outils de navigation disponibles pour vérifier que :
La vue initiale s’affiche correctement, sans erreur évidente dans la console.

Chaque contrôle influe réellement sur la scène.

Le premier plan, le plan intermédiaire et l’arrière-plan présentent une profondeur et une superposition clairement perceptibles.
Les plants de riz ne se résument pas à de simples lignes vertes verticales.
Le mouvement du vent est continu et naturel, sans répétition uniforme évidente.
Les transitions de caméra sont fluides et l’interface reste utilisable sur les écrans étroits.
Si vous ne pouvez pas effectuer une vérification donnée, indiquez-le clairement.
Enfin, fournissez les instructions de démarrage et un récapitulatif des fonctionnalités effectivement implémentées.