Autor: 桌子
Live ausprobieren Über dieses Projekt
Maya Bennett ist ein 3D-Lebenslauf in sechs Kapiteln für eine fiktive Grafikdesignerin. Vier Tripo-Fruchtmodelle schweben zwischen Abschnitten zu Biografie, Ausbildung, Karriere und Fachkenntnissen, während das Scrollen eine importierte Kameraanimation vor- oder rückwärts bewegt.
Die WebGL-Ebene bleibt vom HTML-Lebenslauf getrennt, sodass die Geschichte auch ohne die 3D-Szene lesbar und überspringbar bleibt. Darunter öffnen sich sechs Projekte aus Branding, Verpackungs- und Editorial Design in fokussierten Detailansichten, während das Color Lab die Licht-, Fokus- und Materialsteuerung hinter dem finalen Look zugänglich macht.
Highlights
- Scrollen Sie durch sechs Kapitel des Lebenslaufs, während sich die importierte Kameraanimation mit Ihnen bewegt — beim Zurückscrollen läuft dieselbe Reise ganz natürlich rückwärts.
- Ziehen Sie eines der vier schwebenden Fruchtmodelle, um es mit Trägheit zu drehen, und beobachten Sie dann, wie es sich wieder in die Szene einpendelt.
- Öffnen Sie Color Lab, um Belichtung, Schärfentiefe, EXR-Beleuchtung und das Material jeder Frucht in Echtzeit anzupassen.
- Erkunden Sie anschließend sechs ausgewählte Projekte aus den Bereichen Identität, Verpackung und Editorial Design, die sich jeweils in einer eigenen Detailansicht öffnen.
Technische Analyse
3D-Assets · Tripo-Fruchtmodelle
Banane, Tomate, Erdbeere und Apfel werden als vier GLB-Assets bereitgestellt, deren Szenenknoten und Materialien Tripo-Kennungen tragen. React Three Fiber lädt jedes Asset über eine gemeinsame Komponente, während die Szenenkonfiguration Skalierung, Position, Schwebewegung und Fokusversatz steuert.
Scroll-Choreografie · GSAP + animierte Kamera
GSAP ScrollTrigger bildet den Scrollfortschritt des Lebenslaufs auf eine einzige Zeitleiste von 0 bis 1 ab. Das importierte Kamera-GLB wird auf fünf Sekunden normalisiert und an den Frames 0, 60, 120, 180, 240 und 300 abgetastet, sodass jedes Kapitel zuverlässig erreicht wird und beim Aufwärtsscrollen rückwärts läuft.
Fruchtinteraktion · Quaternion-Drag und Rückkehr
Die Zeigerbewegung steuert die Quaternion-Rotation und eine begrenzte Winkelgeschwindigkeit. Nach dem Loslassen dreht sich jede Frucht kurz mit Trägheit weiter; anschließend führt die Dämpfung sie in ihre vorgegebene Pose zurück und blendet die automatische Bewegung wieder ein. Derselbe Zeigerpfad funktioniert mit Maus und Touch.
Filmisches Finish · EXR-Licht, Autofokus und Color Lab
Ein EXR-Himmel beleuchtet PBR-Materialien über PMREM, während eine feste 25-mm-Kamera den Fokus zwischen der Vierergruppe und dem aktiven Motiv verlagert. BokehPass, Bloom und Farbkorrektur vollenden das Bild, und Color Lab macht diese Steuerungen live zugänglich.
