pbPatrick BeckerSoftwareentwickler
← Alle Projekte

Scrollgesteuerte 3D-Erzählung

Was bleibt, bewegt.

Von Kohle zu Kultur.

Website öffnen: Was bleibt, bewegt. (neuer Tab)Quellcode-Link folgt

Neblige 3D-Zechenanlage mit Förderturm im Ruhrgebiet

Über das Projekt

Eine neblige Reise durch die Industriekultur des Ruhrgebiets. Beim Scrollen fährt die Kamera durch eine zusammenhängende 3D-Welt und hält an vier Stationen: Zechenanlage, Förderturm, Lore und Bergbaumaschine. Kurze Texte erzählen, was hier einmal gearbeitet hat.

ReactThree.jsGSAP

Problem

Eine 3D-Welt soll allein durch Scrollen erzählt werden – vorwärts wie rückwärts flüssig, mit Stationen zum Verweilen und ohne dass Nebel und Licht die Bildrate auf Mobilgeräten kosten.

Ansatz

  • Die Kamera folgt einem Catmull-Rom-Pfad. Eine eigene Zeitfunktion bildet den Scrollfortschritt darauf ab und legt an jeder Station einen Ruheabschnitt an; Sprungpunkte führen direkt dorthin.
  • Architektur, Fördergerüst, Gleise und Vegetation entstehen im Code. Der Nebel kombiniert Tiefennebel mit transparenten Noise-Schichten, die Lichtstrahlen sind günstige Shaderflächen statt Volumen-Raymarching.
  • Mobilgeräte rendern mit geringerer Pixeldichte und Spiegelauflösung; bei reduzierter Bewegung zeigt die Seite feste Stationsansichten ohne Kamerafahrten.

Ergebnis

Eine durchgehende Szene mit vier Stationen, die sich per Scrollen, Sprunglink und Tastatur erkunden lässt. Tests sichern ab, dass die Kamerafahrt monoton und umkehrbar bleibt und jeder Sprung die richtige Station trifft.