Ein three.js-Wald, durch den du spazieren kannst, direkt hier auf der Seite: sanfte Hügel, ein Bach, der sich seinen eigenen Weg hinab sucht, Gras und Blätter, die sich in den Wind legen, Schmetterlinge über den Blumen. Am Wasser wartet ein Mädchen im roten Kleid. Klick irgendwo auf den Boden, und sie geht hinüber — sie läuft keine Schleife mehr, sie geht, wohin du zeigst. Kostenlos, nichts zu installieren.
Linksklick, um dorthin zu gehen · mit rechts ziehen zum Umsehen · scrollen zum Zoomen
Die Kamera treibt langsam von allein, bis du sie anfasst — der erste Klick oder Zug übergibt dir die Steuerung endgültig.
Das Gelände. Der Boden ist ein Raster aus 240 × 240, dessen Eckpunkte alle von einer einzigen Höhenfunktion angehoben werden: ein paar überlagerte Sinuswellen für die sanften Hügel, ein Tal, das dort ausgehoben ist, wo der Bach fließt, abgeflachte Ufer und eine leichte Kante am Rand. Dieselbe Funktion platziert jeden Halm, jeden Stein und jeden Schritt, sodass nichts schwebt oder einsinkt.
Der Bach. Eine Kurve schlängelt sich durchs Tal, und das Wasser ist ein Band, das entlang dieser Kurve liegt. Es kräuselt sich in jedem Frame und wird mit einem physikalischen, durchsichtigen Material gezeichnet, das die Kiesel und das Bachbett darunter bricht. Zehn kleine Fische schwimmen mit schlagenden Schwanzflossen die Strömung auf und ab.
Gras und Bäume. Etwa 25.000 einzelne Grashalme bedecken die Ufer, jeder spitz zulaufend, gebogen, eigens getönt und im Wind schwankend. Ein großer Baum und sechs kleinere tragen jeweils Tausende Blattkarten, die sich in derselben Brise wiegen, während ein Ring dunklerer Nadelbäume dahinter im Nebel verschwindet.
Kleines Leben. Neunzig Blumen in sechs Farben sprenkeln die Wiese, sechs Schmetterlinge ziehen träge Schleifen darüber, vom großen Baum segeln unablässig Blätter herab, und Pollen schweben in der Luft.
Das Licht. Eine tiefe Sonne zur goldenen Stunde steht sechzehn Grad über dem Horizont an einem physikalisch basierten Himmel und wirft weiche Schatten und Lichtstrahlen durch das Blätterdach. Wolken ziehen vorüber, und ein sanfter Bloom und ein Color Grading runden das Bild ab.
Waldspaziergang ist eine einzige three.js-Szene auf WebGL 2, ohne heruntergeladene Modelle oder Bildtexturen — jedes Mesh und jede Textur wird beim Öffnen der Seite im Code erzeugt. Gras und Blätter sind instanzierte Meshes, ein paar Zeilen im Vertex-Shader des Standardmaterials lassen sie schwanken, ein Raycast gegen das Gelände macht aus deinem Klick ein Ziel, und das Bild läuft durch Bloom und einen Color-Grading-Pass, bevor es auf dem Bildschirm landet.
Wir haben das Ganze aufgeschrieben, mit Ausschnitten aus dem echten Quellcode: So haben wir einen begehbaren 3D-Wald in three.js gebaut.
Ja. Waldspaziergang ist komplett kostenlos und läuft direkt in deinem Browser. Es gibt nichts herunterzuladen oder zu installieren, und eine Anmeldung ist nicht nötig.
Ja, in jedem aktuellen mobilen Browser mit WebGL 2. Tippe auf den Boden, um sie loszuschicken, zieh mit einem Finger, um die Kamera zu drehen, und zoome mit zwei Fingern. Die Szene ist recht aufwendig, ältere Handys zeigen sie daher eventuell mit einer niedrigeren Bildrate.
Klick mit links auf eine Stelle am Boden, und sie geht dorthin. Zieh mit rechts oder mit links, um die Kamera um sie herum zu drehen; scrolle oder zoome mit zwei Fingern von Wipfelhöhe bis hinunter zu den Blumen. Ziehen schickt sie nie los, nur ein kurzer, sauberer Klick.
three.js (r160) auf WebGL 2. Es gibt keine heruntergeladenen 3D-Modelle oder Bildtexturen: Gelände, Bäume, Gras, Wasser, Figuren und jede Textur werden beim Laden der Seite im Code erzeugt. Wie das funktioniert, haben wir in So haben wir einen begehbaren 3D-Wald in three.js gebaut aufgeschrieben.
Die Szene zeichnet in jedem Frame etwa 25.000 Grashalme und mehr als 20.000 Blattkarten, dazu weiche Schatten, durchsichtiges, lichtbrechendes Wasser, Bloom und ein Color Grading. Ältere oder integrierte Grafikchips kommen da an ihre Grenzen. Den Vollbildmodus zu verlassen oder das Browserfenster zu verkleinern hilft, weil dann weniger Pixel zu zeichnen sind.
Du kannst gern damit spielen und den Link teilen. Kopieren, Einbetten oder kommerzielle Nutzung von Code oder Assets erfordert eine schriftliche Erlaubnis; siehe Rechte & Nutzung weiter unten oder schreib an [email protected].
Waldspaziergang — Szene, Artwork, Animation und Quellcode sind © 2026 ShengyuStudio (胜遇工作室). Alle Rechte vorbehalten.
Spiel damit, so viel du willst, und schick den Link an wen du magst. Bitte kopiere, veröffentliche oder verbreite den Code und die Assets dieser Seite jedoch nicht weiter und nutze sie nicht kommerziell — dazu gehört das Einbetten in eine andere Website, das Bündeln in einer App oder der Verkauf als Teil eines Produkts — ohne schriftliche Erlaubnis.
Für eine kommerzielle Lizenz, Asset-Lizenzen oder einfach ein Gespräch über eine Zusammenarbeit: [email protected]. Wir sind unkompliziert.
Diese Szene baut auf three.js auf, verwendet unter der MIT-Lizenz und dem Copyright der eigenen Autoren — vollständiger Lizenztext. Der obige Hinweis erstreckt sich nicht auf diesen Open-Source-Teil.
Wir machen PC-Spiele für Steam — einen Xianxia-Deckbuilder, einen schnellen Survival-Run mit Auto-Feuer und ein 3D-Survival-Craftingspiel auf einer Insel, das gerade entsteht. Oder probier das andere Spielzeug in dieser Ecke der Seite.
Außerdem hier: Inselstrand, Sturm voraus und das Stickman Spear Run.