Lezioni del corso
Sette lezioni in fila, ognuna con la teoria che serve, un laboratorio sul tuo progetto e un mini-test di autoverifica. Si parte dal movimento, che rende subito e funziona ovunque, e si arriva alla scena legata allo scorrimento: ogni laboratorio riprende quello di prima.
Quando un sito 3D vale la pena
Le tre cose che chiamiamo «sito 3D», che cos'è WebGL, quando il 3D fa vedere quello che una foto non mostra, e il conto di peso, tempo, batteria e accessibilità.
GSAP: animare in modo prevedibile
Tween, timeline con le posizioni relative, gli ease che danno il gusto e lo sfalsamento. Più il motivo per cui si usa «from» e non «to».
ScrollTrigger: il movimento legato allo scorrimento
start ed end letti con i marcatori, scrub per legare l'avanzamento al dito, pin per la sezione che si ferma e racconta, e il ripiego sul telefono.
La prima scena WebGL con Three.js
Gli import map, i cinque pezzi di una scena, il giro di disegno, il ridimensionamento e il rapporto dei pixel. Con una pagina completa da copiare.
Materiali, luci e texture
Roughness e metalness, l'ambiente che illumina da tutte le direzioni, il costo delle ombre, lo spazio colore delle texture e il tone mapping.
Il 3D che segue lo scorrimento
GSAP che anima la scena, canvas fisso e contenuto che scorre sopra, la camera legata al dito, il disegno a richiesta e il ripiego senza WebGL.
Peso, prestazioni e chi resta fuori
I tre numeri da misurare, glTF e KTX2 per alleggerire, il caricamento in ritardo, chi resta fuori e la checklist prima di pubblicare.
Descrizione
Quasi tutti i siti che chiamiamo 3D sono due cose sovrapposte: del movimento fatto bene e, ogni tanto, una scena vera dentro a un canvas. Questo corso le tiene separate apposta, perché la prima rende subito e funziona ovunque, e la seconda si paga.
Si comincia decidendo se il 3D si guadagna il posto, poi si impara ad animare con GSAP e a legare il movimento allo scorrimento. Da lì si apre il canvas: scena, camera, materiali, luci, e infine la scena comandata dal dito. L'ultima lezione è quella che nei tutorial non c'è mai: quanto pesa, quante chiamate fa, come si carica senza rallentare la pagina e che cosa vede chi il 3D non lo può vedere.
È per chi fa siti e vuole aggiungere questo mestiere: serve saper scrivere HTML, CSS e del JavaScript di base. Non serve saper modellare, e non serve una scheda grafica da gioco. Si lavora su un progetto tuo dalla prima lezione.
Cosa imparerai
- Capire quale dei tre tipi di sito 3D stai facendo, e se vale il suo costo
- Animare con GSAP usando
from, le timeline e le posizioni relative - Scegliere gli ease e le durate senza andare a tentoni
- Legare il movimento allo scorrimento con
scrubepin - Montare una scena Three.js: canvas, camera, renderer, mesh e giro di disegno
- Far smettere a una scena di sembrare finta con l'ambiente e i materiali giusti
- Comandare la scena con lo scorrimento e ridisegnare solo quando serve
- Misurare fotogrammi, chiamate di disegno e peso, e abbassarli
- Servire chi ha WebGL spento o ha chiesto meno movimento
Dettagli del corso
Strumenti e requisiti
Cosa ti serve per seguire il corso e cosa incontrerai nei laboratori:
Serve un editor, un browser recente e un server locale (basta python3 -m http.server): i moduli JavaScript aperti col doppio clic il browser li rifiuta. GSAP e Three.js sono gratuiti e si caricano da CDN, con la versione fissata. Le versioni usate nel corso sono GSAP 3.15 e Three.js 0.186.
Vuoi questo corso per te o per il tuo team?
Porto animazione e 3D per il web dentro le aziende e negli studi, in presenza a Livorno e in Toscana o online, partendo dai prodotti che avete già.
