Autor: Theodore
Live ausprobieren Über dieses Projekt
Foldscape Memories (im Repository auch Nature Memories · Duo genannt) ist eine interaktive Website, die Reisefotos zu dreidimensionalen Erinnerungen entfaltet, gebaut mit React, Three.js, GSAP und Vite. Die Gerätedarstellung geht aus der früheren Browser-Nachbildung des faltbaren iPhone Duo durch den Autor hervor (SkentSun / iPhone Duo Depth Lab) — ein vollständiges Mockup mit Innen- und Cover-Display, sieben Posen und zwei Ausführungen, alles animiert — und dieses Projekt legt die Erinnerungsebene obendrauf.
Die Startseite beginnt mit einem geschlossenen Gerät und einem einzelnen Foto. Beim Scrollen kommen Kandidatenfotos von rechts auf einer zylindrischen Bahn herein und schmelzen über die Kante des Cover-Displays hinein; drückt man Open memory, braucht das Gerät fünf Sekunden, um sich zu entfalten und die Kamera zu senken, während der Ort aus dem Foto aus dem Display aufsteigt. Bisher gibt es fünf Erinnerungen: Round Island Light, ein rotes Segelboot im Eis Grönlands, das Küstenhaus Kálfeyri in Island, Santorini und die Burg Osaka. Ziehen umkreist, Scrollen zoomt, und Rewind faltet das Foto entlang derselben Zeitleiste wieder zusammen. Ein separates Wallpaper Studio oben rechts kleidet Innen- und Cover-Display mit einem hochgeladenen Bild oder Video ein und erzeugt die Tiefe im Browser.
Fotos und GLB-Modelle aller fünf Fälle werden mit dem Repository ausgeliefert, zum Ansehen ist also kein API-Schlüssel nötig; die optionale Tiefenerzeugung im Browser lädt bei Bedarf ein Inferenzmodell herunter. Die Site ist auf Vercel bereitgestellt (Build-Ausgabe dist/client) und steht unter MIT-Lizenz; Apples offizielles Modell und die Wallpaper-Assets sind in THIRD_PARTY.md separat deklariert und von dieser Lizenz ausgenommen.
Highlights
- Die Startseite ist eine kreisförmige Fotogalerie: Scrollen, ziehen oder die Pfeiltasten nutzen — jedes Foto wandert auf einer zylindrischen Bahn zur Gerätekante und schmilzt in das Cover-Display; Rückwärtsscrollen geht denselben Weg zurück und kann an jeder Stelle anhalten.
- Open memory bringt zuerst das gewählte Foto zum Gerät und wartet, bis dessen Szene geladen ist; dann werden fünf Sekunden lang das Gerät aufgeklappt, die Kamera abgesenkt und der Zoom angepasst, bevor eine langsame automatische Umkreisung mit 4°/s beginnt. Ziehen umkreist, Scrollen zoomt, und Rewind lässt die Zeitleiste rückwärts bis zum geschlossenen Foto laufen.
- Fünf Erinnerungen — Round Island Light, ein rotes Segelboot im Eis Grönlands, das Küstenhaus Kálfeyri in Island, Santorini und die Burg Osaka — jeweils ein Foto plus eine GLB-Szene, die mit dem Repository ausgeliefert wird; zum Ansehen ist kein API-Schlüssel nötig.
- Das Wallpaper Studio (?view=wallpaper) tauscht Innen- und Cover-Hintergrund gegen ein hochgeladenes Bild oder Video, berechnet im Browser eine schnelle Tiefenkarte und verfeinert sie mit einem kleinen Modell für zeigergesteuerte Parallaxe und Tiefenschärfe; zwei Ausführungen, Star White und Night Sky; der Ton ist standardmäßig aus und besteht nach dem Einschalten aus prozeduralem Küstenrauschen und einem eigens komponierten Ambient-Akkord; bei reduzierter Bewegung werden Szenenbewegung, automatische Umkreisung und Trägheit deaktiviert.
Technische Analyse
3D-Assets · Fünf GLB-Erinnerungsszenen und ein aus Apples Modell umgebautes Faltgerät
Jede der fünf Erinnerungen besteht aus einem Foto plus einer GLB-Szene (lighthouse-memory-v2.glb ist etwa 25 MB groß) unter public/scenes; zur Laufzeit dient nur die obere Hälfte des Fotos als Cover, und die README hält fest, dass zum Ansehen kein Tripo-API-Schlüssel nötig ist — der Schlüssel wird nur beim Erzeugen der Assets gebraucht.
Das Faltgerät stammt aus Apples offiziellem iPhone-Duo-USDZ: scripts/prepare-model.mjs steuert Playwright, lädt das USDZ in der Dev-Seite, benennt die bewegliche und die feste Hälfte folding-half / stationary-half, ersetzt die Materialien von Innen- und Cover-Display durch austauschbare weiße Flächen und exportiert über GLTFExporter ein binäres GLB (Texturen auf 512 begrenzt). Nur der Metallrahmen darf umgefärbt werden — Displays, Glas, Linsen und Scharnierdetails sind tabu — und THIRD_PARTY.md nimmt die Apple-Assets von der MIT-Lizenz des Repositorys aus.
Fotoreise · Ein GSAP-Fortschritt steuert Galerie, physisches Foto und Cover-Display zugleich
Die kreisförmige Galerie ist die Circular Gallery von React Bits, von OGL nach Three.js portiert: Sie behält das 100×50 unterteilte Mesh, das geschwindigkeitsabhängige Sinus-Wackeln der Vertices und das abgerundete Bild-Sampling und erweitert den Bogen zu einer zylindrischen Bahn mit Tiefe und Ausrichtung, wobei sie eine PerspectiveCamera mit dem Gerät teilt. GSAP Observer übernimmt Mausrad-, Zeiger- und Touch-Eingaben samt Ziehschwelle, während eine Timeline die Reise als approach → receive-and-melt → settle choreografiert; neue Eingaben unterbrechen die laufende Animation, und Ziehen kann sie rückwärts abtasten.
Fotowarteschlange, physisches Foto-Mesh und das echte Cover-Display-Bild werden vom selben Fortschritt gesteuert, mit übereinstimmenden Texturkoordinaten an der Displaykante: Das äußere Mesh wird dort beschnitten, wo es ins Display eintritt, und das Display ergänzt das passende Bild. Cover-Übergänge nutzen den Melt-Zweig des Morph Slider (intensity 0.95 / scale 4.9 / aberration 0.35), wobei uTime vom Reisefortschritt statt von der Uhrzeit getrieben wird — genau das macht Zurückspulen und Standbilder möglich.
Display-Portal · Die Sichtbarkeit entscheidet allein der real bewegte Deckel
Die Szene bleibt auf der vollständig entfalteten Ebene modelliert und wird nie pro Frame neu aufgebaut oder skaliert; wie viel man sieht, bestimmt der Winkel zwischen dem beweglichen linken und dem festen rechten Display — beim Öffnen wird zuerst der Raum über dem rechten Display frei, die linke Hälfte erscheint, sobald der Deckel die Senkrechte passiert und sich der flachen Lage nähert. Hält man den Deckel still, steht das Bild; Zurückspulen durchläuft dasselbe Volumen. Temporäre Schnittflächen, wo der Deckel die Szene durchdringt, werden aus echten Mesh-Schnitten mit räumlicher Vorauswahl trianguliert, für unveränderte Ebenen gecacht und mit wiederverwendbaren GPU-Buffern gefüllt, in blassem Eis oder neutralem Stein eingefärbt und an den Endpunkten „geschlossen“ und „offen“ ausgeblendet; ein Stencil-Ansatz wurde verworfen, weil die gelieferten Meshes offene Ränder haben. Die linke Wasserspiegelung blendet erst nahe der flachen Lage ein, um eine gekippte Doppelsilhouette zu vermeiden.
Der Startup-Durchgang vom 16.09.2026 verlagerte dieses Geometrie-Clipping am Scharnier in einen Module Worker: Jede der fünf Szenen brauchte zuvor 1–1,6 s synchrone Vorbereitung, jetzt verbringt der Hauptthread nur 8–29 ms mit dem Wiederherstellen transferierbarer Buffer; frisch eingehängte Szenen übernehmen vor dem Rendern den aktuellen Faltzustand, die Kameras der Wasserspiegelung sehen nur die natürliche Szene statt Telefon und Galerie, und Presets sowie KI-Worker des Wallpaper Studio werden erst beim Betreten dieser Ansicht geladen.
Wallpaper Studio · Tiefenschätzung im Browser und die Optik des Faltens
Ein hochgeladenes Bild erhält zuerst eine schnelle Tiefenkarte, die dann ein kleines Modell verfeinert (@huggingface/transformers läuft in depth.worker.js; der KI-Worker wird erst erzeugt, wenn man tatsächlich auf Generieren drückt); Vorder- und Hintergrund werden nach Tiefenunterschied verschoben und weichgezeichnet, sodass das Bild beim Bewegen des Zeigers echten Raum bekommt. Die fünf voreingestellten Hintergründe liefern vorab erzeugte Tiefenkarten mit 512×288 mit, das Video-Preset nutzt die seines Posterbilds. Die Ebenen von Innen- und Cover-Display werden zur Laufzeit aus JSON-Layouts und 20 einzelnen SVG-Icons zu transparenten GPU-Texturen zusammengesetzt, sodass das Ändern eines Icons nie bedeutet, das ganze Display neu zu zeichnen.
Das Falten selbst steckt in Parametern: Unschärferadius-Koeffizienten von 3,5 und 1,8 für Innen- und Cover-Display, sodass beim Schließen zuerst das Cover verschwimmt; das Scharnier ist bei 96 % vollständig gefaltet, die letzten 4 % bleiben dem Display, um in den Fokus zu finden; die Helligkeit dimmt entlang einer Sinuskurve mit der Pose, am dunkelsten um 90°; und die seitliche Parallaxe projiziert die Display-Vertices vor dem Sampling auf eine „vollständig entfaltete virtuelle Ebene“, sodass sich die Geometrie faltet, während der Hintergrund darüber gleitet wie auf einer flachen Glasscheibe vor einem — ohne je zu einem Trapez zu verzerren.
