10 splendidi esempi open source di Three.js in azione

Potrebbe sembrare una follia, ma puoi effettivamente creare oggetti 3D con JavaScript. La maggior parte degli sviluppatori web si affida a librerie come Three.js per ottenere questo risultato.

Ma è un processo così dettagliato che non tutti si preoccupano di esaminarlo. Ora, se sei curioso delle cose 3D JS, il modo migliore per imparare è studiare gli altri. Proprio per questo ho realizzato questa galleria.

Questi sono alcuni dei migliori progetti Three.js che ho trovato ospitati su CodePen. Presentano un sacco di stili e tratti diversi che daranno slancio al tuo motore creativo.

1. Terra a basso poli

Con un singolo elemento HTML e alcune dozzine di righe di CSS/JS, abbiamo questo Earth low poly dello sviluppatore Sam Saccone.

All'inizio potrebbe non sembrare molto. Ma è una delle idee più importanti che ho visto e utilizza persino un effetto di animazione personalizzato. Le masse continentali sporgono persino dalla Terra, conferendole un aspetto molto più realistico.

Chiunque abbia già utilizzato Three.js dovrebbe sapere quanto sia fantastico.

È sicuramente un salto in avanti rispetto a progetti simili, principalmente per la sua base di codice più piccola.

2. Sfere

Questo strano progetto simile a un pianeta utilizza anche Three.js con un effetto piuttosto pulito. Spheres viene eseguito sul preprocessore Stylus, che puoi vedere importato nel CSS.

Funziona anche senza HTML, il che lo rende davvero uno spettacolo da vedere. È tutto JS, tutto 3D e funziona perfettamente in tutti i browser moderni.

Le sfere più piccole scivolano sul globo più grande usando le funzioni geometriche della libreria JS. Sembra pazzesco che questo sia persino possibile, ma è una testimonianza di quanto siamo arrivati ​​lontano con i CSS.

3. Rotazione del pianeta

Entrando in ulteriori idee sui planetoidi, abbiamo questa pazza galassia rotante creata dallo sviluppatore Bryan Jones.

Inoltre, utilizza nient'altro che Three.js e alcuni CSS di base per lo stile e l'organizzazione dei pianeti. Devo dire che gli effetti 3D sono sorprendenti. Non riesco ancora a capire che questa roba è possibile in un tipico browser web!

Ma non si può negare che questo frammento di CodePen è un ottimo aiuto per lo studio se hai appena iniziato nel territorio di Three.js.

4. Logo della casa sull'albero in Three.js

La risorsa di apprendimento online Treehouse è semplicemente fenomenale, soprattutto per i principianti. Uno dei loro istruttori, Nick Pettit, ha effettivamente creato un logo completo di Treehouse utilizzando Three.js.

E lasciatemi dire che questa cosa è fantastica! Non ho mai visto una configurazione come questa e raramente vedo penne con commenti così dettagliati. Il codice di Nick rende molto più facile scavare, trovare funzioni che non capisci e quindi premere Google per le risposte.

Tutto ciò che riguarda questo logo 3D dovrebbe dimostrare che il moderno JS è tutt'altro che obsoleto.

Suggerimento: prova a fare clic e trascinare sullo schermo per ruotare il logo. Cose divertenti!

5. Barile di legno

Ecco un altro frammento pazzo sviluppato da Nick Pettit usando solo puro codice JS. Nessun HTML, nessun CSS: tutto viene visualizzato tramite il linguaggio JavaScript.

Naturalmente questo si basa sull'elemento canvas, che puoi generare all'interno di JavaScript. L'ho usato un po' io stesso, ma mai a questo livello. Mostra quanto puoi fare con una solida libreria 3D.

E dimostra anche che Nick sa davvero come insegnare. Questo è solo uno dei tanti esempi nel suo account CodePen, che hanno tutti commenti di facile lettura per l'apprendimento mentre procedi.

6. Tre.js + TweenMax

Lo sviluppatore Martand Kashyap ha combinato lo script TweenMax con Three.js per rendere questa cosa pazzesca.

È una delle penne più uniche in questo elenco, con alcuni fantastici effetti di animazione. I pannelli in realtà sembrano superfici 2D piatte, ma le animazioni di ribaltamento creano un effetto 3D naturale. Diventa piuttosto pazzesco se lo fissi abbastanza a lungo.

Questo era in realtà basato su un progetto di motion graphic che Martand ha convertito in JavaScript. Lo vedo molto più spesso ed è davvero impressionante.

7. Campo stellare di particelle

Il concetto di movimento su una superficie 2D richiama alla mente tutti i tipi di progetti di parallasse. Li troverai in tutto il Web, molte volte utilizzando funzionalità sperimentali in JavaScript.

E questo frammento di CodePen è fantastico per raccogliere tali idee. Ha un'animazione piuttosto pazza con diverse velocità di zoom, panoramica laterale e un sacco di altre funzionalità correlate.

Le particelle vengono generate dinamicamente e puoi fare clic in qualsiasi punto della pagina per ingrandire. Sembra un vuoto infinito di spazio, proprio come quello in cui viviamo. Ma questo è stato creato con puro codice JS.

8. Cubi di Haml

Per qualche altra geometria rotante, dai un'occhiata a questi cubi Three.js. Funzionano sul linguaggio di creazione di modelli Haml insieme a circa 100 righe di JavaScript.

Forse la parte più impressionante di questo design è l'effetto di ombreggiatura. Non lo vedi molto spesso, ma è uno dei modi migliori per creare un effetto 3D dall'aspetto realistico nel browser.

Per fortuna, puoi gestire tutto tramite Three.js, con i frammenti giusti. E questo può funzionare come un ottimo modello per quello scopo.

9. Tesseract

Mike Fey ha sviluppato questo tesseract incredibilmente complesso reso nello spazio 3D. In realtà sembra più un cubo aperto organizzato in uno spazio 3D, una specie di cubo all'interno di un cubo.

Ma nota che questa demo richiede molte librerie per farlo funzionare. Mike ha cinque diversi script JS con jQuery, jQuery UI, ThreeJS, TweenJS e uno script CubeJS. Questi ultimi 3 sono ospitati sul suo sito personale e dovrebbero avere accesso libero.

Non posso dire che questo progetto si rivelerebbe prezioso nel mondo reale. Ma è una risorsa di apprendimento infernale se vuoi immergerti nella geometria spaziale 3D.

10. Frammenti 3D

Lo sviluppatore Tobias Duhr ha creato questi frammenti 3D come esempio di ciò che è possibile fare in ThreeJS. Funzionano come i cubi rotanti menzionati in precedenza, tranne per il fatto che le forme sono diverse e anche l'ombreggiatura è scomparsa.

Considererei questa un'introduzione più semplice per imparare ThreeJS se non sei sicuro da dove iniziare. Certo, questo non è un tutorial, quindi non può insegnarti come altre risorse.

Ma, solo studiando questo codice, te ne andrai con alcune nuove idee per il tuo lavoro.

11. Albero di Pitagora 3D

Questo albero di Pitagora 3D è semplicemente sbalorditivo. Lo sviluppatore Josep Llodra ha creato questo progetto con solo 150 righe di JavaScript, insieme alla libreria Three.js.

In realtà è basato su questo progetto, che ho menzionato prima. Fondamentalmente, struttura quei cubi in un'unica forma definita, quindi li organizza in base alle dimensioni e alla posizione.

Se non sei sicuro di cosa puoi fare con Three.js, spero che questa galleria offra un po' di ispirazione. Ma puoi sempre trovare di più su CodePen se sei disposto a guardarti intorno.