Scroll-gesteuerte 3D-Szene

Ein Gerät, das dem Scrollen folgt.

Das Gehäuse kommt aus Blender — nicht aus der Oberfläche, sondern aus einem Python-Skript im Projekt. Der Bildschirm ist eine zur Laufzeit gezeichnete Canvas-Textur und zeigt deine echte Uhrzeit.

↓ Scrollen

01 — Modell

Das Modell ist Code, keine Datei.

blender/iphone.py baut Unibody, Kamera-Plateau und Objektive aus den Herstellermaßen des iPhone 18 Pro auf — 71,9 × 150,0 × 8,75 mm —, schneidet Lautsprecher und Anschluss als echte Öffnungen hinein und exportiert alles als GLB. Wer die Proportionen ändern will, ändert das Skript und baut neu — die Modelldatei ist nur das Ergebnis, nie die Quelle. Beleuchtet wird im Browser: vier Flächenlichter statt einer HDRI-Datei, dafür null Netzwerk-Requests und Kontrolle über jedes Glanzlicht.

Dreiecke: 27.842
GLB: 703 kB
übertragen: 272 kB
Teile: 8

02 — Bewegung

Fünf Schlüsselbilder, dazwischen weich gemischt.

Die Scroll-Position ist eine einzige Zahl zwischen 0 und 1. Sie bestimmt, zwischen welchen zwei Schlüsselbildern das Gerät gerade steht. Die eigentliche Trägheit kommt danach: jede Achse zieht ihrem Zielwert framerate-unabhängig nach, dazu ein Nachschwingen aus der Scroll-Geschwindigkeit.

useFrame((state, dt) => {
  const k = sample(scroll.progress)
  g.rotation.y = damp(
    g.rotation.y, k.ry, 3.5, dt
  )
})

03 — Bildschirm

Der Sperrbildschirm wird mit Canvas 2D gezeichnet und als Textur auf die Fläche gelegt. Die Uhr zeigt deine echte Uhrzeit.

Zeiger-Parallaxe

Bewege die Maus. Das Gerät neigt sich leicht mit — 0,14 Radiant, mehr wirkt sofort wie ein Spielzeug.

Nachbau

Das ist der komplette Aufbau.

blender/iphone.py

das Modell, als Skript

components/IPhone.tsx

Materialien, Schlüsselbilder

components/Scene.tsx

Canvas, Lichtformer, Postprocessing

components/SmoothScroll.tsx

Lenis an GSAP gekoppelt

lib/scroll.ts

geteilter Zustand zwischen DOM und 3D

components/displayTexture.ts

Sperrbildschirm aus Canvas 2D

Wer weiche Bewegung im Betriebssystem abbestellt hat, bekommt natives Scrollen, ein ruhig stehendes Gerät und kein Postprocessing. Auf Schmalbildschirmen fällt zusätzlich die Pixeldichte auf 1,5 und der Effekt-Composer weg — dort rückt das Gerät mittig unter den Text.