Progetto WebGL in TypeScript + Three.js: Sala della Preghiera per il Buon Raccolto del Tempio del Cielo di Pechino

Note del creatore

Crea con TypeScript + Three.js un progetto WebGL completo e funzionante della Sala della Preghiera per il Buon Raccolto del Tempio del Cielo di Pechino. Tutte le geometrie architettoniche, le texture e le animazioni devono essere generate proceduralmente dal codice durante l’esecuzione; è vietato caricare modelli esterni .glb, .gltf, .obj, .fbx o di altri formati. Ricostruzione architettonica: tre coperture circolari a più livelli, con dimensioni e altezze diverse, rivestite da tegole smaltate blu, un pinnacolo dorato, colonne rosse, corpo circolare dell’edificio, decorazioni dipinte in blu, verde e oro, mensole dougong, porte e finestre. Per il tetto usa profili curvi, superfici di rivoluzione o geometrie personalizzate, così da rendere gronde ampie e leggermente rialzate; non sostituirle con un semplice cono. Realizza una piattaforma circolare bianca a tre livelli in marmo Han, con scalinata centrale in pietra, balaustre e colonne; mantieni proporzioni armoniose e una gerarchia visiva chiara. Genera proceduralmente le texture delle tegole e gli elementi decorativi; per i componenti ripetuti dai priorità a InstancedMesh. Scena e interazione: Cielo azzurro di Pechino, pavimentazione della piazza e una vegetazione contenuta; usa DirectionalLight insieme ad AmbientLight／HemisphereLight, attiva le ombre, l’occlusione ambientale e un tone mapping cinematografico moderato. Supporta la rotazione e lo zoom con OrbitControls, oltre a una modalità attivabile e disattivabile di lenta rotazione automatica intorno al modello. Un pulsante deve alternare le modalità “esplosione／ricomposizione”: tetto, colonne, mensole dougong, pareti, porte e finestre, balaustre e piattaforma devono distribuirsi gradualmente per livelli e poi tornare con precisione nella posizione originale. L’animazione deve essere gestita dal codice, con tempi sfalsati e senza spostamenti istantanei. Consegna direttamente il progetto completo e le istruzioni per l’avvio. La pagina deve adattarsi in modo responsive alle dimensioni della finestra, offrire una resa visiva di alta qualità e un’interazione fluida, mantenendo buone prestazioni sui normali browser desktop grazie a istanziazione, dettagli geometrici adeguati e ottimizzazione del rendering. Organizza il codice in moduli chiari e facili da estendere; verifica la build e le funzionalità principali, indicando con trasparenza gli elementi non verificati.