3D nel web in Three.js: mi sono fatto aiutare da Claude per creare queste esperienze evento

Three.js non è una novità per me.
Ho seguito il corso di Bruno Simon, ho studiato con i video di Gianluca Lomarco.
Ho lavorato a esperienze 3D interattive allo scroll, a progetti in realtà aumentata e a siti creative in stile Awwwards.

Gianluca mi ha anche sfidato a creare un blob animato dalla musica: ne è nato questo techno ledwall.

Negli ultimi mesi ho ripreso in mano il 3D per fare dei giochi stagionali su questo sito, questa volta con Claude. Il codice l’ha scritto lui, la direzione è stata mia. In questo articolo ti racconto cosa è cambiato davvero e perché ho deciso di metterli su un sito professionale.

O meglio… Esperienze ad evento

Ho sempre adorato le esperienze interattive, quel meccanismo dell’evento, o ci sei in quell’istante oppure non potrai più assaporarti l’evento magico.

Ma ho sempre anche amato le ricorrenze e le solite attività trash che esse si portano dietro, come cappellini di Babbo Natale sul logo o post con gli occhiali da sole in estate.

Detto questo ho voluto portare il tutto ad un altro livello, la logica dietro questi giochi/esperienze interattive 3D è a tempo… Durante Halloween potrai giocare alle zucche, durante la stagione sciistica potrai fare il punkettone e jibbare sullo snowboard mentre sei out of office (OOO) quindi solo nei weekend praticamente.

Se volete fermarvi un attimo, solo per voi lettori del blog, queste esperienze saranno sempre attive in questo articolo.

Ne arriveranno sempre di nuove lo prometto.

• Accendi le zuccheUn campo al buio, una torcia e delle zucche da accendere prima che la batteria si scarichi. Occhio ai fantasmi.Dal 1 ottobre al 1 novembre
• Fuori ufficioUno skipass da 75 secondi per fare più trick possibile in snowboard, fino all’ultimo salto con il drone.Weekend, dal 8 dicembre al 28 febbraio

Chi ha lavorato con il 3D sul web conosce bene due ostacoli.

Il primo è il linguaggio degli shader. Sono piccoli programmi che girano sulla scheda video e seguono una logica tutta loro: è la parte più difficile da imparare e quella che può prenderti più tempo. Qui l’AI mi aiuta tantissimo.

Il secondo è l’ottimizzazione dei modelli 3D per il web. Spesso i modelli arrivavano da chi li disegnava senza pensare al browser: troppo pesanti, non low poly, senza bake delle texture. Bisognava fare avanti e indietro finché non diventavano leggeri. Oggi generare un modello con l’AI è molto più semplice.

Un campo al buio, una torcia e delle zucche da accendere prima che la batteria si scarichi. Tieni il fascio di luce su una zucca finché non si accende e la batteria si ricarica. Quelle chiare però sono trappole: accenderle costa batteria. In giro ci sono anche dei fantasmi, e se li illumini ti saltano addosso.

La luce della torcia e la faccia intagliata delle zucche sono calcolate negli shader, proprio la parte che prima mi avrebbe preso più tempo.

"Se quest’inverno non mi trovi, spero di essere qui." Il gioco di snowboard nasce da questa frase ed è attivo nei weekend della stagione sciistica. Hai 75 secondi di skipass per fare più trick possibile, tra kicker e rail. Allo scadere c’è l’ultimo salto, con un drone che ti segue in aria e i punti che valgono doppio.

La prima regola è stata niente asset presi dal web: geometrie, shader e suoni sono generati da zero. Anche i modelli qui sono scritti direttamente nel codice, quindi il problema del peso non si è nemmeno posto.

Claude l’ho corretto di continuo. Ho provato ogni versione e ho chiesto modifiche, proprio come farei con uno sviluppatore. Alcune indicazioni, così come gliele ho scritte:

• "il jumpscare lo deve fare quando illumini il fantasma"
• "la zucca in home fatta così è un po’ invasiva"
• "togli il testo descrittivo, lascia solo i comandi"

Anche le prime versioni avevano i loro difetti: la nebbia vicino alla camera diventava un disco enorme, la luna era bruciata dal bloom e il volto del fantasma veniva coperto dal retro del lenzuolo.

Sono uno sviluppatore e gli easter egg mi piacciono, tanto che su questo sito ce ne sono altri: se apri i DevTools, per esempio, trovi un saluto.

C’è però anche un motivo più concreto. Molti siti, una volta online, restano fermi per anni. Qui invece il menu cambia con il calendario: il link a un gioco compare solo nei giorni della sua stagione. Chi torna in un altro periodo può trovare qualcosa di nuovo, provarlo e giocarci. Per me dà valore, perché si vede che il sito è vivo.

Ne arriveranno altri, e questa pagina si aggiornerà da sola.