Utilizzo di Three.js per aggiungere elementi 3D ai tuoi siti web

Il design piatto è fantastico, ma gli elementi 3D portano i layout del web design a un nuovo livello. I siti web con grafica 3D animata e scene 3D interattive stanno diventando più diffusi che mai. I clienti ora vogliono quei tipi di design sui loro siti Web e te li chiederanno. Imparare a incorporare il design 3D nei tuoi progetti di web design migliorerà solo il tuo percorso di carriera e ti farà ottenere più clienti. Per fortuna, risorse come Three.js sono facilmente disponibili per i designer e gli sviluppatori Divi per aggiungere elementi 3D personalizzati ai loro siti web.

In questo post, esamineremo le basi di Three.js e perché è una buona scelta per aggiungere elementi 3D ai tuoi siti web. Sì, anche i tuoi siti web Divi. Per iniziare con Three.js, avrai bisogno di alcune conoscenze di codifica, in particolare HTML, CSS e Javascript. Se stai ancora imparando a programmare, segui fin dall'inizio il tutorial passo passo sul sito web Three.js. Se la terminologia su dove aggiungere il codice è nuova per te, sono disponibili molti tutorial per guidarti attraverso i passaggi tecnici. Ti suggerisco di guardare alcuni video, magari seguire un corso in Skillshare o Udemy per avere un'idea di come incorporare la libreria Three.js nei tuoi progetti.

Andiamo ad esso.

Cos'è Three.js

Prima di tutto, cos'è Three.js?

Three.js è una libreria 3D javascript che fornisce renderer <canvas>, <svg>, CSS3D e WebGL. Porta i disegni 3D nel tuo browser senza la necessità di un plug-in. La libreria può aiutarti a creare semplici elementi 3D, complesse interazioni 3D e giochi animati creativi. Three.js è una libreria open source con un repository Github in cui gli utenti possono condividere le proprie creazioni Three.js.

Di tutti i renderer coperti da Three.js, il più comunemente usato è WebGL. La creazione di elementi 3D solo con WebGL richiede molte righe di codice e molte conoscenze matematiche. Three.js rende molto più semplice creare una scena e renderla con WebGL.

Comprensione di una scena 3D e della terminologia di Three.js

Per creare un'animazione 3D con Three.js, devi prima capire come è impostata una scena 3D. I tre elementi necessari per costruire un ambiente 3D sono i seguenti:

1. La scena
2. La fotocamera
3. il renderer

La scena è dove imposti tutti gli elementi 3D che Three.js visualizzerà. Visivamente ricorda un palcoscenico teatrale o un televisore. la fotocamera è il punto di vista della scena e come un essere umano vedrebbe tecnicamente gli elementi sulla scena. Il renderer mette tutto insieme e disegna la scena. Se conosci bene l'animazione 3D, sicuramente lo riconosci come uno standard per l'impostazione di una scena.

Una volta che la scena è impostata, gli oggetti vengono posizionati al suo interno. Gli oggetti sono costruiti in tre fasi:

1. La geometria
2. Il materiale
3. La maglia

La geometria di un oggetto è lo scheletro o il contorno di base di una forma. Per dare alla geometria un colore o una trama, viene applicato il materiale . La combinazione della geometria e del materiale è chiamata mesh .

La libreria Three.js ha già molte geometrie di base da usare. Non è necessario costruirli da zero. Devi solo chiamarli dalla libreria nel tuo codice e quindi personalizzarli. Oltre a utilizzare codici esadecimali per i colori come materiale, puoi creare trame con immagini o trovarle nelle librerie di trame.

Dopo che la scena è stata impostata e le geometrie sono state aggiunte, aggiungi funzioni per illuminare la scena, animare gli oggetti e molto altro ancora. Oltre agli oggetti di base disponibili nella libreria Three.js, puoi anche caricare altre immagini 3D dalle librerie online o da quelle che crei su Blender.

Iniziare con Three.js

Non potrebbe essere più facile prendere confidenza con Three.js. Il sito web di Three.js ha tutta la documentazione di cui hai bisogno per capire come funziona la libreria e come puoi usarla.

Nel sito web Three.js e sul loro Github, troverai una versione live del codice per l'applicazione Three.js più semplice. Usano JSFiddle ma puoi anche vederlo funzionare su CodePen o Codesandbox.io

Ti suggerisco di seguire i passaggi nel sito Web Three.js per capire davvero come funziona. O con Codepen, il tuo terminale o il software di codifica preferito. L'intera libreria Three.js è disponibile sul sito Web Threejs.org da utilizzare una volta che hai impostato la scena e hai iniziato a notare cosa si può fare. Di seguito puoi vedere l'applicazione di base Three.js che funziona su JSFiddle. Fare clic su "Modifica con JSFiddle" per giocare con il codice.

Risorse per l'apprendimento di Three.js

Poiché Three.js è un'API open source, accadono sempre cose sul loro repository GitHub. Significa che ci sono sempre molte cose nuove da imparare. Per fortuna, hanno creato un manuale digitale che viene costantemente aggiornato per le modifiche. Puoi trovarlo su discoverthreejs.com. Questa è di gran lunga la migliore risorsa in circolazione. Se hai bisogno di un tutorial passo passo su come configurare l'applicazione e utilizzare le risorse della libreria, ecco un ottimo corso su Skillshare che ti guida attraverso tutti i passaggi nella documentazione di Three.js.

Allo stesso modo, questo tutorial di YouTube ti mostra le basi per impostare una scena con Three.js, ma si aspetta che tu conosca le abilità di sviluppo web di base.

Se desideri approfondire Three.js e WebGL, questo corso Udemy spiega tutto e promette di farti conoscere bene la creazione di contenuti 3D entro la fine.

Alla ricerca di un tutorial nitido, veloce e sporco? Questo tutorial passo passo sul codice su CreativeBloq è proprio quello di cui hai bisogno.

Esempi di Three.js

Non c'è niente di meglio di un po' di ispirazione per iniziare a progettare i tuoi progetti 3D con Three.js. Per vedere alcune incredibili creazioni di Three.js, basta andare sul loro sito Web ed esplorare.

Utilizzo di Three.js con Divi

Usare Three.js con Divi è abbastanza semplice. Devi solo aggiungere la libreria javascript ai tuoi file di progetto e aggiungerla al tuo HTML. Per aggiungere un'applicazione a qualsiasi layout Divi, crea prima il design 3D separatamente sul tuo software di codifica preferito o sul terminale del tuo computer. Quando la build è pronta, copia il javascript in un modulo di codice. Assicurati di utilizzare i tag <script> di apertura e chiusura.

Conclusione

Three.js è una potente risorsa per aggiungere elementi 3D a un sito web. In questo post, abbiamo esaminato le basi di come funziona Three.js. C'è così tanto nell'API che devi davvero immergerti in profondità e sperimentare. Le possibilità sono davvero infinite. Da un semplice cubo rotante a un complesso gioco interattivo all'interno di un ricco mondo digitale. Cosa creerai con Three.js?

Immagine in evidenza tramite theromb / shutterstock.com