Was du siehst
Die Seite beginnt an der Sonne. Beim Scrollen fliegt die Kamera an allen acht Planeten vorbei, jeder mit seiner echten Oberfläche: Krater auf Merkur, Wolkenbänder auf Jupiter, Stadtlichter auf der Nachtseite der Erde, der Ring des Saturn mit dem Schatten des Planeten darauf. Am Ende zoomt die Kamera hinaus, bis das ganze System zu sehen ist.
Rechts stehen die Planeten selbst als Navigation, ein Klick fliegt direkt hin. Und wer mit der Maus über einen Planeten zieht, kann ihn drehen.
So ist es gebaut
Three.js zeichnet die Szene im Browser. Die Oberflächen sind Texturen, die auf Kugeln liegen; ein eigener Shader fügt Relief, den rötlichen Übergang zur Nachtseite und den Glanz auf dem Wasser hinzu. Die Atmosphären entstehen durch eine vereinfachte Lichtstreuung: Für jeden Bildpunkt rechnet der Shader nach, wie viel Sonnenlicht die Lufthülle in Richtung Kamera lenkt.
Danach kommt die Kinoarbeit: Helles glüht nach (Bloom), die Farben laufen durch eine filmische Tonkurve, dazu feine Körnung und dunkle Bildränder. Die Kamera folgt einer Kurve, die so berechnet ist, dass sie keinem Planeten zu nahe kommt.
Woher die Idee kommt
Die Planetentexturen stammen von Solar System Scope und beruhen auf Aufnahmen der NASA. Die Idee dahinter ist unsere: ein Sonnensystem als Seitenaufbau, in dem alles um die Sonne kreist – so wie bei uns alles um die Idee kreist.
Darauf achten wir
- Texturen in zwei Größen: 4K am Rechner, 2K am Handy
- Geladen wird nur, was als Nächstes kommt
- Wer „Bewegung reduzieren“ eingestellt hat, springt ruhig von Welt zu Welt
- Alle Texte bleiben echter Text für Suchmaschinen