La grafica 3D è sempre più diffusa: videogames, film, mockup di prodotti e anche i siti web stanno iniziando a sfruttarla sempre di più.
nell'articolo di Oggi parliamo di Spline: un tool gratuito che permette di creare grafiche e modelli 3d in minuti ed esportarli in modo semplice per essere aggiunti ai siti web.
Vedremo anche Three.js: la libreria javascript su cui si basa Spline e il suo funzionamento base.
Di cosa parliamo in questo articolo:
Spline.design è un tool disponibile su Mac, Windows e Linux che permentte di creare semplici modelli 3d.
Ecco qui un paio di esempi interattivi.
Spline.design è gratuito nel piano base, avrai accesso a gran parte delle funzionalità ma sarà sempre visibile il logo di Spline in basso a destra (come negli esempi qui sopra),
I piani premium partono dai 19$ al mese e permettono di esportare anche in formato Video o GIF.
Vai su Spline.design e scarica la versione adatta al tuo sistema operativo.
Dopo averlo scaricato ed installato ti troverai di fronte alla seguente schermata.
Qui potrete creare un nuovo file da zero oppure navigare la libreria gratuita proposta da Spline.
L'editor di Spline è piuttosto semplice, chi è abituato a programmi di grafica avanzata (Blender, Cinema4d, Maya ecc) si sentirà probabilmente limitato, ma per l'utente senza competenze può risultare già sfidante.
Spesso l'interfaccia di Spline viene associata a Programmi come Figma o Adobe XD per la sua semplicità.
Aperto l'editor troveremo sulla sinistra la colonna preposta a contenere i livelli (se sei abituato a photoshop, illustrator ecc dovresti sapere perfettamente cosa sono) che contiene tutti gli oggetti 3D e 2D che aggiungerai alla scena.
Ti lasciamo un video dimostrativo davvero ottimo per inziare.
Il video è in lingua inglese ma puoi attivare i sottotitoli in italiano o chiederci di apporfondire qualche aspetto che non ti è chiaro nei commenti.
Hai visto come realizzare una semplice scena con diversi elementi 3D e 2D, come animarla e come esportarla per inserirla nel tuo sito web.
Ora vediamo insieme qualche funzionalità in più.
Al momento in Spline si possono importare oggetti 3d in modo automatico premendo il tasto "library" in basso a destra.
Sono disponibili tantissimi oggetti 3D che puoi modificare comodamente all'interno dell'editor.
Si possono importarte anche i formati FBX/OBJ/GLTF e le immagini in formato JPG/PNG e, in modo parziale, anche SVG.
Potendo importare immagini di conseguenza è possibile creare delle texture personalizzate (Una "texture" è definita come la qualità visibile e tattile della superficie di un oggetto[4], che sia liscio, rugoso, morbido, o duro, ed è essenzialmente un effetto visivo che aggiunge ricchezza e dimensione a una qualunque composizione).
Ecco come aggiungere una Texture ad un oggetto direttamente nell'editor di Spline.
Three.js è una libreria Javascript e un vero e proprio framework per la realizzazione di contenuti 3D per il Web. Con Three.js è possibile realizzare modelli, giochi, video musicali, visualizzazioni di dati scientifici e statistici in 3D.
Alcuni esempi sono disponibili direttamente dal sito ufficiale.
Per utilizzare il framework sono necessarie le API WebGL, API per connettere il browser alla scheda grafica e quindi avere maggiore potenza di calcolo per il rendering delle immagini.
La potenza necessaria è variabile e alcuni dispositivi più datati potrebbero faticare, e non poco, per visualizzare composizioni complesse e super dettagliate. L'utilizzo di questo tipo di tecnologia sarà molto probabilmente il futuro del web, ma attualmente è bene considerare che non tutti riescono ad avere un'esperienza fluida e piacevole.
Se sei curioso di capire come funziona Three.js ti lasciamo un video con un esempio pratico per il rendering di un'auto, ovviamente l'auto può essere sostituita con qualsiasi oggetto 3D si desideri.
Quest'altro ottimo video invece tratta le basi di Three.js, creando una scena basic (poligoni che ruotano all'hover del mouse) ma affronta la gran parte delle funzionalità presenti in questa libreria.
Se sei curioso di vedere esempi di siti web che sfruttano le potenzialità del 3D e in particolare Three.js ecco qui una raccolta, creata dal team di awwwards.com.
Ora siamo curiosi di sapere cosa ne pensi tu del 3d applicato al web.
Ti aspettiamo nei commenti!
