Autore: 桌子
Provalo dal vivo Su questo progetto
Maya Bennett è un curriculum 3D in sei capitoli dedicato a una graphic designer immaginaria. Quattro modelli di frutta Tripo fluttuano tra i pannelli dedicati a biografia, formazione, carriera e competenze, mentre lo scorrimento fa avanzare o retrocedere un’animazione della camera importata.
Il livello WebGL rimane separato dal curriculum HTML, così la storia resta leggibile e può essere saltata anche senza la scena 3D. Sotto, sei progetti di branding, packaging ed editoria si aprono in viste di dettaglio dedicate, mentre Color Lab espone i controlli di illuminazione, messa a fuoco e materiali alla base del look finale.
Punti salienti
- Scorri sei capitoli del curriculum mentre l’animazione della camera importata si muove con te: tornando indietro, lo stesso percorso si inverte in modo naturale.
- Trascina uno dei quattro modelli di frutta fluttuanti per farlo ruotare con inerzia, poi osservalo tornare a stabilizzarsi nella scena.
- Apri Color Lab per regolare in tempo reale esposizione, profondità di campo, illuminazione EXR e materiale di ogni frutto.
- Prosegui con sei progetti selezionati di identità, packaging ed editoria, ciascuno con una propria vista di dettaglio.
Analisi tecnica
Asset 3D · modelli di frutta Tripo
Banana, pomodoro, fragola e mela sono distribuiti come quattro asset GLB i cui nodi di scena e materiali contengono identificatori Tripo. React Three Fiber carica ogni asset tramite un unico componente condiviso, mentre la configurazione della scena gestisce scala, posizione, movimento fluttuante e offset di messa a fuoco.
Coreografia dello scorrimento · GSAP + camera animata
GSAP ScrollTrigger associa l’avanzamento dello scorrimento del curriculum a un’unica timeline da 0 a 1. Il GLB della camera importato viene normalizzato a cinque secondi e campionato ai fotogrammi 0, 60, 120, 180, 240 e 300, così ogni capitolo raggiunge un punto prevedibile e si inverte quando si scorre verso l’alto.
Interazione con i frutti · trascinamento a quaternioni e ritorno
Il movimento del puntatore controlla la rotazione tramite quaternioni e una velocità angolare limitata. Dopo il rilascio, ogni frutto conserva una breve rotazione inerziale; poi lo smorzamento lo riporta alla posa definita e reintroduce gradualmente il movimento automatico. Lo stesso percorso del puntatore funziona con mouse e touch.
Finitura cinematografica · luce EXR, autofocus e Color Lab
Un cielo EXR illumina i materiali PBR tramite PMREM, mentre una camera fissa da 25 mm sposta la messa a fuoco tra il gruppo di quattro frutti e il soggetto attivo. BokehPass, bloom e color grading completano l’inquadratura, e Color Lab rende questi controlli accessibili in tempo reale.
