Paesaggio 3D interattivo di una valle giapponese in fiore

Realizza direttamente una pagina web con un paesaggio 3D di alta qualità, interattivo in tempo reale nel browser. Tema: valle giapponese in fiore. Usa HTML, CSS e JavaScript. Non generare immagini e non limitarti a fornire un concept di design, non simulare il 3D usando una sola immagine di sfondo con un effetto parallasse. Voglio un prodotto finito realmente eseguibile ed esplorabile. 【1. Obiettivo del progetto】 Deve essere un paesaggio di valle completo e continuo, con una chiara profondità tra primo piano e sfondo, non una piccola decorazione isolata, un’isola sospesa, un plastico su basamento o una semplice demo tecnica. Lo stile è voxel art moderna e dettagliata: mantieni il linguaggio formale della geometria cubica, ma con un’immagine ad alta risoluzione, antialiasing e luci e ombre curate. Niente pixel art rétro a bassa risoluzione, niente grandi blocchi assemblati grossolanamente e niente filtro pixelato applicato all’immagine. La qualità visiva viene prima di tutto. Meglio rinunciare a qualche funzione che sacrificare composizione, materiali e illuminazione. 【2. Uso delle immagini di riferimento】 Se sono presenti immagini di riferimento, analizzane prima la composizione, la scala, l’illuminazione e i rapporti cromatici. Prendi spunto solo dall’atmosfera e dal linguaggio visivo, riprogettando la scena, senza copiare la posizione degli edifici, degli alberi, delle montagne e delle strade e senza replicarla 1:1. L’immagine di riferimento non è un materiale di sfondo per la pagina web. La scena deve essere composta da vera geometria 3D. 【3. Composizione della scena】 All’apertura deve essere già visibile un’immagine completa e accattivante, senza costringere l’utente a ruotare prima la visuale per trovare un’angolazione interessante. Usa una camera prospettica, non una camera isometrica dall’alto come nei plastici. L’immagine deve avere un primo piano, un piano intermedio e uno sfondo ben definiti: Primo piano: un antico ciliegio imponente, accompagnato da rocce, erba, vegetazione, lanterne di pietra e pochi petali caduti, per creare una cornice naturale ai bordi dell’immagine, senza però coprire il fiume, il ponte e gli edifici principali. Piano intermedio: un fiume sinuoso guida lo sguardo verso l’interno della scena, attraversato da un ponte di legno rosso; il villaggio, la casa da tè, il santuario e i sentieri seguono l’andamento del terreno, con collegamenti realistici tra gli edifici. Il terreno deve presentare dislivelli, rive e transizioni naturali, non modelli distribuiti uniformemente su una superficie piana. Sfondo: una pagoda a più livelli sul pendio, foreste a distanze diverse, creste montuose e montagne innevate in lontananza. Rappresenta la distanza attraverso variazioni di scala, occlusioni, contrasti tra tonalità calde e fredde e prospettiva atmosferica, non limitandoti a rimpicciolire gli oggetti lontani. Non distribuire tutti gli elementi in modo uniforme. Servono gerarchia, variazioni di densità, spazi vuoti e un punto focale chiaro. 【4. Modellazione e qualità dell’immagine】 Ciliegio: il tronco deve avere curvature, biforcazioni e radici; la chioma deve essere composta da gruppi irregolari di fiori, con spazi vuoti, variazioni di spessore e rami visibili. Non trasformarlo in pochi globi o ammassi cubici regolari. Edifici: i tetti devono avere tegole sovrapposte, gronde sporgenti, travi, pilastri e finestre a griglia; gli edifici devono differire per funzione, volume e altezza: non riempire la valle con copie della stessa casa. Terreno: lungo le rive devono esserci rocce umide, ciuffi d’erba e transizioni vegetali. Evita gradini troppo regolari, strisce ripetute, motivi a scacchiera e una griglia procedurale evidente. Superficie dell’acqua: deve riflettere gli elementi circostanti, con increspature moderate, variazioni di profondità e una transizione naturale verso le rive. Usa, per quanto possibile, riflessi reali della scena; anche in caso di riduzione della qualità per motivi di prestazioni, l’aspetto deve rimanere credibile. Non sostituire l’acqua con rumore tremolante, distorsioni marcate o un’unica superficie piana blu. Dettagli: puoi aggiungere pochi pesci koi, petali caduti, lucciole, una cascata e uccelli in volo lontani, ma tutti devono contribuire all’atmosfera senza rendere l’immagine caotica. Non accumulare dettagli solo per poter dichiarare un elevato numero di modelli. 【5. Colori e atmosfera】 L’impostazione predefinita è l’ora blu: una valle e montagne lontane dai toni freddi, fiori di ciliegio rosa delicato e la luce calda, ma non sovraesposta, delle lanterne e delle finestre. La luce calda deve concentrarsi nelle aree frequentate, senza tingere di arancione l’intero ambiente. Servono ombre morbide, variazioni di luminosità nei punti di contatto tra gli oggetti, un’esposizione corretta, un bloom discreto, antialiasing e una foschia stratificata in base alla distanza. Evita immagini sbiancate o grigiastre, saturazione eccessiva, nebbia densa su tutta la scena, luci sovraesposte e aliasing evidente. La geometria cubica può essere nitida, ma il rendering non deve risultare grezzo. Fornisci anche due atmosfere aggiuntive: “mattina” e “pioggia”; al cambio devono variare simultaneamente cielo, luce ambientale, foschia ed effetti locali, non limitarsi a modificare il colore dello sfondo. 【6. Interazioni e interfaccia】 Fornisci quattro inquadrature progettate ad hoc: panoramica della valle, visuale bassa lungo il fiume, sentiero del tempio e vista dall’alto del pendio. Il passaggio deve essere fluido e ogni inquadratura deve avere un valore compositivo indipendente. Interazioni di base: trascinamento del mouse per osservare la scena, rotella per zoomare o avanzare; sui touchscreen, trascinamento e zoom con due dita. Fornisci funzioni per reimpostare la visuale, nascondere l’interfaccia e salvare l’immagine corrente. Miglioramenti opzionali: esplorazione libera, movimento lento della camera e audio ambientale. L’audio ambientale deve essere disattivato per impostazione predefinita e riprodotto solo dopo un clic esplicito dell’utente. Le funzioni aggiuntive non devono compromettere la qualità della scena predefinita. L’interfaccia deve essere discreta e curata, lasciando il paesaggio al centro dell’esperienza. Posiziona titolo e barra dei controlli ai margini, senza coprire il punto focale. Su desktop e smartphone non devono verificarsi pulsanti fuori schermo, testo sovrapposto o controlli inutilizzabili. 【7. Sviluppo e prestazioni】 È consentito usare Three.js / WebGL e dipendenze CDN con versioni fisse e compatibili tra loro. Dai priorità a funzionalità di rendering mature, senza riscrivere un intero motore solo per ottenere “zero dipendenze”. Raccogli, per quanto possibile, l’HTML, il CSS e il JavaScript scritti manualmente in un unico file HTML. Genera elementi della scena con geometria e materiali procedurali, senza dipendere da immagini o risorse di modelli 3D esterne. Per gli oggetti ripetuti usa tecniche di disegno batch o rendering istanziato, quando appropriate; controlla in modo ragionevole suddivisioni, ombre, riflessi e risoluzione del rendering. Fornisci una modalità alta qualità e una modalità leggera; sui dispositivi mobili usa per impostazione predefinita le impostazioni più leggere. Non aumentare indefinitamente il numero di voxel per ottenere più dettagli. Aggiungi un indicatore di caricamento, un messaggio quando WebGL non è supportato e la gestione degli errori necessaria. Non riprodurre automaticamente l’audio se non è stato attivato; rispetta la preferenza di sistema per la riduzione dei movimenti. 【8. Verifica prima della consegna】 Non consegnare il lavoro subito dopo aver scritto il codice. Se l’ambiente attuale supporta l’esecuzione nel browser e la cattura di schermate, apri prima realmente la pagina, controlla l’inquadratura predefinita, le quattro visuali, il cambio di atmosfera e il layout su desktop e smartphone, poi correggi, sulla base delle schermate, eventuali problemi evidenti di composizione, esposizione, occlusioni e rendering. Controlla in particolare: presenza di schermate vuote, errori di caricamento o errori nella console; presenza di compenetrazioni, sfarfallio, strisce nelle ombre, sovraesposizione o anomalie nella superficie dell’acqua; se l’immagine predefinita appare davvero come un paesaggio completo e non come un piccolo plastico; se i pulsanti funzionano realmente e se sul mobile escono dai limiti dello schermo. Puoi usare schermate del browser per la verifica, ma non chiamare strumenti di generazione delle immagini. Indica con onestà i test non completati e non dichiarare di aver verificato ciò che non è stato verificato. Consegna finale: 1. Un file HTML realmente presente e apribile, oppure un’anteprima interattiva supportata dall’ambiente attuale. 2. Se possibile, allega una schermata reale del rendering nel browser. 3. Una breve spiegazione dei comandi e delle condizioni necessarie per l’esecuzione. Completa direttamente il lavoro; per i dettagli non essenziali, fai scelte progettuali coerenti in autonomia, senza rimandarmi continuamente problemi implementativi che puoi risolvere da solo.