Interaktive 3D-Landschaft einer japanischen Kirschblütenschlucht

Erstelle direkt eine hochwertige 3D-Landschaft als interaktive Webseite, die sich in Echtzeit im Browser erkunden lässt. Thema: japanische Kirschblütenschlucht. Setze HTML, CSS und JavaScript ein. Erzeuge keine Bilder und liefere nicht nur ein Designkonzept, und täusche keine 3D-Szene durch ein einzelnes Hintergrundbild mit Parallax-Effekt vor. Ich möchte ein tatsächlich lauffähiges und erkundbares Endprodukt. 【1. Ausrichtung des Projekts】 Es handelt sich um eine vollständige, zusammenhängende Landschaft mit einer klaren Tiefenstaffelung, nicht um ein isoliertes kleines Diorama, eine schwebende Insel, eine Landschaft auf einer Basis oder eine reine technische Demo. Der Stil ist modernes, detailliertes Voxel Art: Die Formensprache kubischer Geometrie bleibt erhalten, doch das Bild soll hochauflösend, kantengeglättet und mit fein ausgearbeiteten Licht- und Schatteneffekten sein. Kein nostalgischer Low-Resolution-Pixel-Look, keine groben Stapel aus Klötzen und kein Pixel-Filter über dem gesamten Bild. Die visuelle Qualität hat Vorrang. Lieber einige Funktionen weniger als Abstriche bei Komposition, Materialien und Beleuchtung. 【2. Verwendung von Referenzbildern】 Falls Referenzbilder vorhanden sind, analysiere zunächst ihre Komposition, Maßstäbe, Lichtführung und Farbbeziehungen. Übernimm nur die Atmosphäre und visuelle Sprache und entwirf die Szene neu, ohne die Positionen von Gebäuden, Bäumen, Bergen und Wegen zu kopieren oder eine 1:1-Reproduktion anzufertigen. Das Referenzbild ist kein Hintergrundmaterial für die Webseite. Die Szene selbst muss aus echter 3D-Geometrie bestehen. 【3. Szenenkomposition】 Beim Öffnen soll standardmäßig sofort ein vollständiges und ansprechendes Bild zu sehen sein, ohne dass der Nutzer zunächst die Kamera drehen muss, um eine gute Perspektive zu finden. Verwende eine perspektivische Kamera und keine isometrische Draufsicht wie bei einem Diorama. Das Bild braucht einen klaren Vorder-, Mittel- und Hintergrund: Vordergrund: Ein charaktervoller alter Kirschbaum mit Felsen, Gräsern, Pflanzen, Steinlaternen und einigen herabgefallenen Blüten bildet einen natürlichen Rahmen am Bildrand, darf jedoch den Fluss, die Brücke und die wichtigsten Gebäude nicht verdecken. Mittelgrund: Ein gewundener Fluss führt den Blick in die Szene; eine rote Holzbrücke überspannt das Wasser. Dorf, Teehaus, Schrein und Wege verteilen sich entlang des Geländeverlaufs, mit realistischen Verbindungen zwischen den Gebäuden. Der Boden weist Höhenunterschiede, Uferlinien und natürliche Übergänge auf; die Modelle sind nicht gleichmäßig auf einer ebenen Fläche verteilt. Hintergrund: Eine mehrstöckige Pagode am Berghang, Wälder in unterschiedlichen Entfernungen, Bergrücken und schneebedeckte Berge in der Ferne. Zeige die Entfernung durch Maßstabsänderungen, Verdeckungen, warme und kalte Farbverläufe sowie atmosphärische Perspektive, statt entfernte Objekte lediglich zu verkleinern. Verteile nicht alle Elemente gleichmäßig über die Szene. Es braucht eine klare Hierarchie, Variationen in Dichte, bewusst gesetzte Freiräume und einen eindeutigen visuellen Fokus. 【4. Formen und Bildqualität】 Kirschbaum: Der Stamm weist Krümmungen, Verzweigungen und sichtbare Wurzeln auf. Die Krone besteht aus unregelmäßigen Blütenbüscheln mit Zwischenräumen, variierender Dichte und sichtbaren Ästen. Verwende keine wenigen regelmäßigen Kugeln oder Würfelgruppen. Gebäude: Die Dächer haben geschichtete Ziegel, auskragende Traufen, Balken, Säulen und Fensterteilungen. Die Gebäude unterscheiden sich in Funktion, Volumen und Höhe; bedecke die Schlucht nicht mit Kopien desselben Hauses. Gelände: Am Ufer gibt es feuchte Felsen, Grasbüschel und natürliche Übergänge zur Vegetation. Vermeide zu regelmäßige Stufen, wiederholte Streifen, Schachbrettmuster und ein deutlich prozedural erzeugtes Raster. Wasseroberfläche: Sie muss die Umgebung widerspiegeln und moderate Wellen, Variationen in Tiefe und Farbe sowie einen natürlichen Übergang zum Ufer aufweisen. Nutze möglichst echte Reflexionen der Szene. Auch bei einer Leistungsreduzierung muss die Darstellung visuell glaubwürdig bleiben. Ersetze das Wasser nicht durch flackerndes Rauschen, starke Verzerrungen oder eine durchgehende blaue Fläche. Details: Einige Koi, herabfallende Blüten, Glühwürmchen, ein Wasserfall und Vögel in der Ferne sind möglich, sollen jedoch ausschließlich die Atmosphäre unterstützen und das Bild nicht überladen. Häufe keine Details an, nur um mit einer bestimmten Modellanzahl zu werben. 【5. Farben und Atmosphäre】 Standardmäßig gilt die Stimmung der blauen Stunde: ein kühles Tal und kühle Berge in der Ferne, zartrosa Kirschblüten sowie warme, aber nicht überbelichtete Laternen und Fensterlichter. Das warme Licht konzentriert sich auf belebte Bereiche; färbe nicht die gesamte Umgebung orange. Verwende weiche Schatten, Licht- und Schattenkontraste an den Kontaktstellen von Objekten, eine angemessene Belichtung, zurückhaltendes Bloom, Kantenglättung und Nebel mit klarer Tiefenstaffelung. Vermeide ausgewaschene Farben, eine graue Trübung, Übersättigung, dichten Nebel über die gesamte Szene, überbelichtete Lichter und deutlich sichtbare Treppeneffekte. Die kubische Geometrie darf klar erkennbar sein, das Rendering selbst darf jedoch nicht grob wirken. Biete zusätzlich die Stimmungen „Morgen“ und „Regen“ an. Beim Wechsel müssen sich Himmel, Umgebungslicht, Nebel und lokale Effekte synchron ändern und nicht nur die Hintergrundfarbe. 【6. Interaktion und Benutzeroberfläche】 Biete vier sorgfältig gestaltete Kameraperspektiven: Panorama der Schlucht, niedrige Perspektive am Flussufer, Tempelpfad und Blick vom Berghang nach unten. Der Wechsel soll fließend erfolgen, und jede Perspektive braucht einen eigenständigen kompositorischen Wert. Grundlegende Interaktion: Mit der Maus ziehen, um die Szene zu betrachten, und per Mausrad zoomen oder vorwärtsgehen. Touchscreens unterstützen Ziehen und Pinch-Zoom. Biete Funktionen zum Zurücksetzen der Ansicht, Ausblenden der Benutzeroberfläche und Speichern des aktuellen Bildes an. Optionale Erweiterungen: Freies Erkunden, eine langsame Kamerafahrt und Umgebungsgeräusche. Umgebungsgeräusche sind standardmäßig deaktiviert und werden erst nach einem aktiven Klick des Nutzers abgespielt. Zusätzliche Funktionen dürfen die Qualität der Standardansicht nicht beeinträchtigen. Die Benutzeroberfläche soll zurückhaltend und gestaltet sein, während die Landschaft im Mittelpunkt steht. Titel und Steuerleiste gehören an den Rand und dürfen den visuellen Fokus nicht verdecken. Auf Desktop und Smartphone dürfen keine abgeschnittenen Buttons, überlappenden Texte oder unbedienbaren Elemente auftreten. 【7. Technik und Performance】 Three.js / WebGL sowie versionsgebundene, miteinander kompatible CDN-Abhängigkeiten dürfen verwendet werden. Nutze bevorzugt etablierte Rendering-Funktionen und schreibe nicht für „null Abhängigkeiten“ eine komplette Engine neu. Halte selbst geschriebenes HTML, CSS und JavaScript möglichst in einer einzigen HTML-Datei zusammen. Erzeuge die Landschaft mit prozeduraler Geometrie und Materialien, ohne externe Bild- oder 3D-Modellressourcen. Zeichne wiederholte Objekte mit geeigneten Batch- oder Instancing-Verfahren. Begrenze Subdivision, Schatten, Reflexionen und Renderauflösung angemessen. Biete einen Qualitätsmodus und einen leichten Modus an; auf Smartphones soll standardmäßig die leichtere Einstellung verwendet werden. Erzeuge Details nicht einfach durch eine unbegrenzte Erhöhung der Voxelanzahl. Füge einen Ladehinweis, eine Meldung bei fehlender WebGL-Unterstützung und die notwendige Fehlerbehandlung hinzu. Spiele keinen Ton automatisch ab, solange er nicht aktiviert wurde, und respektiere die Systemeinstellung zur Reduzierung von Bewegung. 【8. Abnahme vor der Übergabe】 Übergib das Projekt nicht sofort nach dem Schreiben des Codes. Wenn die aktuelle Umgebung die Ausführung im Browser und Screenshots unterstützt, öffne die Seite zunächst tatsächlich, prüfe die Standardkamera, alle vier Perspektiven, den Wechsel der Stimmungen sowie das Desktop- und Smartphone-Layout und korrigiere anhand der Screenshots offensichtliche Probleme bei Komposition, Belichtung, Verdeckungen und Rendering. Prüfe insbesondere: ob ein leeres Bild, ein Ladefehler oder Konsolenfehler auftreten; ob Clipping, Flackern, Schattenstreifen, Überbelichtung oder eine fehlerhafte Wasseroberfläche vorhanden sind; ob die Standardansicht tatsächlich wie eine vollständige Landschaft und nicht wie ein kleines Diorama wirkt; und ob die Funktionsbuttons tatsächlich funktionieren und auf Mobilgeräten nicht aus dem Bildschirm ragen. Zur Abnahme darfst du Browser-Screenshots verwenden, aber keine Bildgenerierungstools aufrufen. Nicht durchgeführte Tests müssen ehrlich angegeben werden; behaupte nicht, sie seien bereits überprüft worden. Endgültige Übergabe: 1. Eine tatsächlich vorhandene und öffnungsfähige HTML-Datei oder eine interaktive Vorschau, sofern die aktuelle Umgebung dies unterstützt. 2. Wenn Screenshots möglich sind, füge einen echten Screenshot aus dem Browser-Rendering bei. 3. Eine kurze Erläuterung der Bedienung und der erforderlichen Laufzeitbedingungen. Schließe die Umsetzung direkt ab. Triff bei nicht kritischen Details selbst konsistente Designentscheidungen, und überlasse mir nicht wiederholt Implementierungsfragen, die du eigenständig lösen kannst.