Immersive 3D-Reisfeld-Website

Erstelle eine immersive 3D-Reisfeld-Website, die im Browser läuft, mit dem Thema: „Ein Meer aus Grün / Wind in den Reisfeldern.“ Vervollständige den Code, installiere die erforderlichen Abhängigkeiten und starte eine Vorschau. Beschränke dich nicht auf einen Vorschlag oder einen Implementierungsplan. 1. Visuelle Ausrichtung Die Atmosphäre soll natürlich, friedlich und stilvoll wirken – wie eine interaktive Landschafts-Website mit einer einheitlichen visuellen Gestaltung. Die Szene soll Folgendes enthalten: Vordergrund: klar erkennbare schmale Blätter, gebogene Halme und einige herabhängende Rispen. Mittelgrund: ein zusammenhängendes Reisfeld, das sich in die Ferne erstreckt, mit ausreichender Dichte und natürlich variierenden Abständen. Hintergrund: eine unregelmäßige Baumlinie, gestaffelte niedrige Hügel und eine dezente atmosphärische Perspektive. Himmel: sanfte Graublau-Töne, subtile Wolkenvariationen und ein natürlicher Übergang am Horizont. Positioniere die Standardkamera etwas oberhalb der Rispen und richte sie über das Feld auf die entfernten Hügel. Der Himmel soll ungefähr ein Drittel des Bildausschnitts einnehmen, während das Reisfeld die Komposition dominiert. Verwende vor allem dunkelgrüne, olivgrüne und gelbgrüne Vegetationsfarben. Vermeide fluoreszierendes Grün. Variiere Höhe, Ausrichtung, Krümmung und Farbe der Reispflanzen auf natürliche Weise. 2. Anforderungen an die Animation Der Wind muss als kontinuierliche Wellen erscheinen, die sich seitlich über das Feld bewegen: Halte die Wurzeln weitgehend fest, mit zunehmend stärkerer Bewegung zu den Blattspitzen und Rispen hin. Pflanzen im selben Bereich sollen sich koordiniert bewegen und dennoch individuelle Variationen aufweisen. Kombiniere langsame, großflächige Windwellen mit subtilen lokalen Störungen. Vermeide, dass alle Pflanzen vollkommen synchron schwingen. Verschiebe nicht ganze Pflanzen und lass die Blätter nicht flackern. Verwende standardmäßig eine sanfte Brise, die auch über längere Zeit angenehm anzusehen ist. 3. Anforderungen an die Interaktion Stelle einfache Steuerelemente bereit, die sich tatsächlich auf die Szene auswirken: Windgeschwindigkeitsregler: Stärke und Geschwindigkeit der Windanimation stufenlos anpassen. Beleuchtungsmodi: Morgen, Nachmittag und Goldene Stunde. Stimme Änderungen an Himmel, Lichtrichtung, Farbtemperatur und Nebelfarbe aufeinander ab. Ansichtsmodi: Offenes Feld und Zwischen den Reispflanzen, mit fließenden Kameraübergängen. Pause/Fortsetzen: die Umgebungsanimation pausieren und fortsetzen. Mausbewegungen dürfen eine sehr dezente Kamerareaktion auslösen, sollten aber keinen Schwindel verursachen. Drehe die Kamera standardmäßig nicht kontinuierlich über große Winkel. 4. Interface-Design Verwende eine bildschirmfüllende Szene mit einem darüberliegenden Interface: Oben links: ein kleines VERDANT-Logo. Unten links: die Serifenschrift-Überschrift „Ein Meer aus Grün.“ Darunter der kleinere Untertitel „Nichts zu tun. Folge einfach der Brise.“ Unten rechts: ein kompaktes, halbtransparentes dunkelgrünes Bedienfeld. Achte auf gut lesbaren Text, großzügige Abstände und darauf, dass die Steuerelemente die zentrale Landschaft nicht verdecken. Die Steuerelemente müssen auch auf schmalen Bildschirmen ohne Überlappungen bedienbar bleiben. 5. Technologie und Performance Verwende Three.js. Falls bereits ein Projekt vorhanden ist, behalte dessen Build-Umgebung bei. Verwende Instancing und GPU-basierte Vertex-Animation, um große Mengen an Vegetation zu verarbeiten. Erzeuge kein separates Draw-Objekt für jede Pflanze und aktualisiere nicht jede Pflanze in jedem Frame auf der CPU. Reduziere die Vegetationsdetails mit zunehmender Entfernung und setze eine angemessene Begrenzung für die Pixel Ratio. Bevorzuge prozedurale Geometrie und Materialien, um ein zuverlässiges Laden von Assets sicherzustellen. Die Szene muss in Echtzeit gerendert werden. Verwende kein vollständiges Landschaftsbild und kein Video als Hauptszene. Modellnamen und Vergleichsbezeichnungen werden in der Postproduktion hinzugefügt; füge sie nicht in die Szene ein. 6. Kriterien für den Abschluss Überprüfe nach der Implementierung mit den verfügbaren Browser-Tools Folgendes: Die anfängliche Ansicht wird korrekt gerendert und weist keine offensichtlichen Konsolenfehler auf. Jedes Steuerelement wirkt sich tatsächlich auf die Szene aus. Vordergrund, Mittelgrund und Hintergrund weisen eine klar erkennbare Tiefe und Staffelung auf. Die Reispflanzen sind mehr als einfache aufrecht stehende grüne Linien. Die Windbewegung ist kontinuierlich und natürlich, ohne offensichtlich gleichförmige Wiederholungen. Die Kameraübergänge sind fließend und das Interface bleibt auf schmalen Bildschirmen bedienbar. Wenn du eine bestimmte Prüfung nicht durchführen kannst, gib das klar an. Gib abschließend Anweisungen zum Starten sowie eine Zusammenfassung der tatsächlich implementierten Funktionen aus.