TypeScript- und Three.js-WebGL-Projekt: Halle für gute Ernten im Himmelstempel von Peking

Hinweise des Urhebers

Erstelle mit TypeScript und Three.js ein vollständiges, lauffähiges WebGL-Projekt der Halle für gute Ernten im Himmelstempel von Peking. Die gesamte Bauwerksgeometrie, alle Texturen und Animationen müssen zur Laufzeit prozedural durch Code erzeugt werden. Das Laden externer Modelle wie .glb, .gltf, .obj oder .fbx ist nicht zulässig. Architektonische Umsetzung: drei blaue, glasierte Ziegeldächer als Rundkuppeln mit jeweils unterschiedlicher Größe und Höhe, eine vergoldete Dachspitze, rote Säulen, ein runder Baukörper, blau-grüne und goldene Verzierungen, Dougong-Konsolen sowie Türen und Fenster. Verwende für die Dächer geschwungene Profile, Rotationskörper oder eigene Geometrien, um weit ausladende, leicht nach oben gebogene Dachkanten darzustellen; einfache Kegel sind dafür nicht zulässig. Ein weißes, dreistufiges, rundes Podest aus Han-Bai-Yu-Marmor mit zentraler Freitreppe, Geländern und Säulen; die Gesamtproportionen sollen harmonisch und die Ebenen klar erkennbar sein. Erzeuge Ziegeltexturen und Verzierungen prozedural. Verwende für wiederkehrende Bauteile bevorzugt InstancedMesh. Szene und Interaktion: Pekinger blauer Himmel, ein Platz als Bodenfläche und wenig Begrünung; setze DirectionalLight zusammen mit AmbientLight／HemisphereLight ein und aktiviere Schatten, Umgebungsverdeckung sowie ein dezentes filmisches Tone Mapping. Unterstütze mit OrbitControls das Drehen und Zoomen sowie eine optional aktivierbare, langsame automatische Umrundung. Über eine Schaltfläche zwischen „Explosion“ und „Wiederaufbau“ wechseln: Dächer, Säulen, Dougong-Konsolen, Wände, Türen und Fenster, Geländer sowie das Podest sollen sich hierarchisch und fließend auseinanderbewegen und anschließend präzise an ihre ursprünglichen Positionen zurückkehren. Die Animation muss durch Code gesteuert werden, mit versetzten Zeitabläufen und ohne abrupte Sprünge. Liefere direkt das vollständige Projekt einschließlich Startanleitung. Die Seite soll sich responsiv an die Fenstergröße anpassen, eine hochwertige Darstellung und flüssige Interaktion bieten und dank Instancing, angemessener geometrischer Detailtiefe und Rendering-Optimierung auch in gängigen Desktop-Browsern performant laufen. Strukturiere den Code übersichtlich und erweiterbar. Überprüfe den Build und die wichtigsten Funktionen und weise ehrlich auf nicht getestete Punkte hin.