Home 9 Web Design 9 Siti web 9 Spline: 3D interattivo nel Web Design

Spline: 3D interattivo nel Web Design

da | 10, Mag 2024 | Siti web

Spline è un software di design, in molti aspetti simile ad Adobe XD e Figma, ma con funzioni aggiuntive per il 3D. A differenza di altri software di prototipazione, Spline ha la capacità di esportare il lavoro direttamente in formati integrabili con siti web!

Il software può essere utilizzato tramite il web o scaricato direttamente sul PC.

Clicca sul logo per interagire

Come creare elementi 3D interattivi

Il software è estremamente intuitivo, anche se richiede un minimo di esperienza con i software 3D, altrimenti è possibile seguire i loro tutorial dettagliati e accurati.

Per creare il logo interattivo di RAD, ho seguito semplici passaggi: Innanzitutto, ho importato il logo in formato SVG. Successivamente, dalle impostazioni di “shade”, ho incrementato il valore di “extrusion” a 3.

Cambiare la forma di un oggetto tramite extrusion

Questo processo trasforma il logo da 2D a 3D.

Alternativamente, è possibile importare direttamente un logo in formato 3D (GLTF, STL, FBX, OBJ).

Come importare un file dentro spline

Leggi tutorial su come convertire un logo da 2D a 3D con Blender.

Una volta ottenuto il logo in 3D, ho impostato lo sfondo in nero e il lavoro è stato completato. Cliccando sul pulsante “Play“, è possibile visualizzare una anteprima del lavoro, con il modello che ruota in base all’interazione dell’utente.

tasto play su spline per modalità preview

Il software offre anche funzioni di prototipazione e animazione. Ogni elemento ha uno stato al quale è possibile collegare un evento. Lo stato potrebbe essere una posizione diversa rispetto a quella iniziale, mentre l’evento è ciò che attiva quel particolare stato. Spline offre diversi tipi di eventi, come il click del mouse, il tempo trascorso e persino lo scroll del mouse.

creare stati da associare a vari eventi su Spline

Esportazione ed integrazione nei siti web

Una volta completato il lavoro, è possibile esportare il file in vari formati, tra cui jpg, mp4, e GIF, ma anche in formati più avanzati per visualizzare il lavoro in modo interattivo.

come esportare un file su spline

Per integrare il lavoro in un sito web con CMS WordPress, basta cliccare sul pulsante “copy embed” nella sezione dell’URL pubblico e inserirlo tramite shortcode nel sito.

Ci sono anche altre funzionalità avanzate per l’esportazione più adatte agli sviluppatori. Spline ha una collaborazione con Framer, che presumibilmente semplifica ulteriormente l’integrazione dei lavori realizzati su Spline.

Potenzialità e limitazioni

Spline ha un enorme potenziale. Nella libreria è possibile trovare lavori molto avanzati, come minigiochi o animazioni tridimensionali. La maggiore potenzialità risiede nella capacità di integrare queste funzioni sul web e far interagire gli utenti.

Tuttavia, il software presenta ancora alcune limitazioni. L’integrazione di lavori 3D all’interno di un sito potrebbe comprometterne le prestazioni, quindi è consigliabile inserire lavori semplici e ben ottimizzati. Inoltre, l’integrazione su WordPress è più limitata rispetto ad altri strumenti come Framer.

Nel complesso, Spline è un software in continua evoluzione e aggiornamento, quindi merita sicuramente di essere tenuto d’occhio per il futuro.

Articoli Correlati

Prestazioni su WordPress, come ottenere un sito veloce

Prestazioni su WordPress, come ottenere un sito veloce

Un sito web veloce è essenziale per migliorare l'esperienza utente e il posizionamento nei motori di ricerca. Se il tuo sito WordPress è lento, è il momento di ottimizzarlo per ottenere prestazioni migliori. Come si analizzano le prestazioni di un sito web? Per...

Divi 5.0: Novità e Funzionalità Avanzate per il Web Design

Divi 5.0: Novità e Funzionalità Avanzate per il Web Design

Divi è un tema per WordPress, negli anni è diventato famoso per la facilità di utilizzo del suo builder, con cui è possibile creare siti web moderni e innovativi. Insieme ad Elementor, è considerato uno degli strumenti migliori per realizzare siti usando la...