Sito immersivo 3D dedicato a una risaia

Crea un sito immersivo 3D dedicato a una risaia, eseguito nel browser, con il tema:
“Un mare di verde / Il vento tra le risaie.”
Completa il codice, installa le dipendenze necessarie e avvia un’anteprima. Non fermarti a una proposta o a un piano di implementazione.

1. Direzione visiva

L’atmosfera generale deve essere naturale, pacifica e raffinata, come quella di un sito paesaggistico interattivo con una direzione artistica coerente.

La scena deve includere:

Primo piano: foglie sottili chiaramente distinguibili, steli ricurvi e alcune pannocchie di riso ricadenti.

Piano intermedio: una risaia continua che si estende in lontananza, con densità sufficiente e variazioni naturali nella spaziatura.
Sfondo: una linea irregolare di alberi, colline basse disposte su più livelli e una prospettiva atmosferica discreta.
Cielo: tonalità grigio-azzurre morbide, leggere variazioni tra le nuvole e una transizione naturale all’orizzonte.
Posiziona la videocamera predefinita leggermente sopra le pannocchie di riso, rivolta attraverso la risaia verso le colline lontane.
Il cielo deve occupare circa un terzo dell’inquadratura, mentre la risaia deve dominare la composizione.
Usa principalmente tonalità di verde intenso, verde oliva e verde giallastro per la vegetazione. Evita il verde fluorescente.
Varia naturalmente l’altezza, l’orientamento, la curvatura e il colore delle piante di riso.

2. Requisiti per l’animazione
Il vento deve apparire come onde continue che attraversano lateralmente la risaia:
Mantieni le radici per lo più fisse, con un movimento progressivamente più intenso verso le punte delle foglie e le pannocchie.
Le piante nella stessa area devono muoversi in modo coerente, conservando però variazioni individuali.

Combina onde di vento lente e su larga scala con leggere perturbazioni locali.

Evita che tutte le piante oscillino in perfetta sincronia. Non traslare intere piante e non causare sfarfallii nelle foglie.

Usa una brezza predefinita delicata, piacevole da osservare anche a lungo.
3. Requisiti di interazione
Fornisci controlli semplici che influiscano realmente sulla scena:
Slider della velocità del vento: regola senza scatti l’intensità e la velocità dell’animazione del vento.
Modalità di illuminazione: Mattina, Pomeriggio e Golden Hour. Coordina i cambiamenti di cielo, direzione della luce, temperatura colore e colore della nebbia.

Modalità di visualizzazione: Campo aperto e Tra il riso, con transizioni fluide della videocamera.

Pausa/Riprendi: mette in pausa e riavvia l’animazione ambientale.

Il movimento del mouse può produrre una risposta molto discreta della videocamera, ma non deve causare vertigini.
Non ruotare continuamente la videocamera su ampi angoli per impostazione predefinita.
4. Design dell’interfaccia
Usa una scena a schermo intero con un’interfaccia sovrapposta:
In alto a sinistra: un piccolo logotipo con la scritta VERDANT.

In basso a sinistra: il titolo con grazie “Un mare di verde.”
Sotto, il sottotitolo più piccolo “Non c’è nulla da fare. Segui semplicemente la brezza.”
In basso a destra: un pannello di controllo compatto, semitrasparente e verde scuro.

Mantieni il testo leggibile, usa spaziature generose ed evita che i controlli ostacolino il paesaggio principale.

I controlli devono restare utilizzabili sugli schermi stretti senza sovrapporsi.

5. Tecnologia e prestazioni
Usa Three.js. Se è disponibile un progetto esistente, mantieni il relativo ambiente di build.
Usa l’instancing e l’animazione dei vertici tramite GPU per gestire grandi quantità di vegetazione.
Evita di creare un oggetto di disegno separato per ogni pianta o di aggiornare ogni pianta sulla CPU a ogni fotogramma.
Riduci il livello di dettaglio della vegetazione a maggiore distanza e applica un limite ragionevole al pixel ratio.
Prediligi geometrie e materiali procedurali per garantire un caricamento affidabile degli asset.
La scena deve essere renderizzata in tempo reale. Non usare un’immagine o un video dell’intero paesaggio come scena principale.
I nomi dei modelli e le etichette di confronto verranno aggiunti in post-produzione; non inserirli nella scena.
6. Criteri di completamento
Dopo l’implementazione, usa gli strumenti del browser disponibili per verificare che:
La vista iniziale venga renderizzata correttamente, senza errori evidenti nella console.

Ogni controllo influisca realmente sulla scena.

Primo piano, piano intermedio e sfondo abbiano profondità e stratificazione distinguibili.
Le piante di riso siano più di semplici linee verdi verticali.
Il movimento del vento sia continuo e naturale, senza ripetizioni uniformi evidenti.
Le transizioni della videocamera siano fluide e l’interfaccia resti utilizzabile sugli schermi stretti.
Se non puoi eseguire una verifica specifica, dichiaralo chiaramente.
Infine, fornisci le istruzioni di avvio e un riepilogo delle funzionalità effettivamente implementate.