Share
Three.js è una libreria / API JavaScript open source utilizzata per creare e visualizzare animazioni grafiche 3D animate su un browser Web, compatibile con l'elemento canvas HTML5, WebGL e SVG. In questo articolo How to Learn, esploreremo le funzionalità di questo motore e condivideremo risorse e suggerimenti per aiutarti a iniziare a sviluppare giochi con esso fin da subito.
Dal momento che Three.js è stato distribuito per la prima volta da Ricardo Cabello a GitHub nel 2010, la base di codici è stata continuamente mantenuta e migliorata da una comunità in crescita e solidale. Il set di funzionalità integrate è ampio e include:
Oltre 100 esempi che illustrano queste caratteristiche (e altro) sono inclusi nel repository principale, e molti altri siti forniscono raccolte di esempi con il codice sorgente disponibile. Inoltre, dal momento che la libreria è scritta in Javascript, è facile da installare e utilizzare, oltre a distribuire il tuo lavoro.
Un gioco di corse futuristico creato da Thibaut Despoulain:
Un gioco di corse automobilistiche creato da Jasmine Kent:
Gli articoli di sviluppo correlati sono disponibili sul blog Gamasutra di Jasmine.
Un platform 2.5D renderizzato in 3D, con un editor di live level incorporato, creato da Mario Gonzalez:
Un gioco di marmo / calcio creato da Jerome Etienne:
Un gioco di labirinti creato da Rye Terrell:
Un gioco di ping-pong 3D che incorpora la chat video all'interno del gioco, creata da Google:
Maggiori informazioni possono essere trovate nella pagina degli Esperimenti di Chrome del gioco e in questo articolo del dietro le quinte.
Un viaggio interattivo creato da Walt Disney e UNIT9
Ulteriori informazioni sono disponibili nella pagina Esperimenti di Chrome del gioco.
Poiché Three.js è una libreria Javascript, la configurazione del tuo ambiente di sviluppo è particolarmente semplice: gli unici requisiti sono un editor di testo e un browser web. Detto questo, gli editor di testo con funzionalità quali l'evidenziazione / piegatura della sintassi, la corrispondenza delle parentesi, una mappa dei documenti e così via, come Notepad ++ o Sublime Text, forniranno un'esperienza di codifica migliore.
Per quanto riguarda i browser Web, sia Google Chrome sia Mozilla Firefox hanno un eccellente supporto WebGL. Google Chrome dispone di una serie particolarmente utile di strumenti di sviluppo incorporati che possono semplificare notevolmente il processo del flusso di lavoro, come una console che può essere utilizzata per il debug e l'ispezione di valori e oggetti JavaScript e le impostazioni dell'area di lavoro che consentono di modificare e salvare i file di origine dal browser. Maggiori dettagli sono disponibili sul sito Chrome DevTools.
Mancia: È anche possibile scrivere codice usando Three.js interamente online, usando servizi come jsFiddle, come dimostrato da questo esempio. Tuttavia, questa opzione viene in genere utilizzata solo per la condivisione di esempi o dimostrazioni con piccole quantità di codice.
Per configurare Three.js, prima vai al repository GitHub. Ci sarà un pulsante che dice "Download ZIP" che ti permetterà di scaricare tutto il codice nel repository come file ZIP. (Esistono altre alternative, come la clonazione o la forking del repository usando Git, che non sono necessarie per l'utente medio: queste opzioni sono principalmente utili solo se si intende contribuire al codice sorgente o alla documentazione online.)
Post correlatiUna volta scaricato e decompresso il file in una directory di tua scelta, rimane un altro passaggio importante prima di poter visualizzare la maggior parte degli esempi sul tuo computer. Molti progetti Three.js riguardano il caricamento di contenuti da file esterni (come le immagini), ma, per ragioni di sicurezza, i browser Web limitano questo comportamento per impostazione predefinita. Le due opzioni per risolvere questo problema sono modificare le impostazioni di sicurezza nel browser Web o eseguire file da un server locale.
La prima opzione è la più semplice (ad esempio, è possibile modificare le impostazioni di Google Chrome in Windows creando una scorciatoia per Chrome e modificando il percorso per includere la bandiera --permettere-file-access-from-file). Le istruzioni per entrambe le opzioni sono disponibili nella wiki ufficiale, nella pagina intitolata Come eseguire le cose localmente.
Three.js è scritto in Javascript, quindi è consigliabile avere una conoscenza pratica di questa lingua. C'è una miriade di risorse liberamente disponibili su Internet per questo; due risorse interattive particolarmente rilevanti sono:
Per sapere come impostare una scena di base in Three.js (inclusa una discussione su scene, telecamere, renderer, mesh e loop dell'animazione, visita: il manuale ufficiale Un'altra introduzione alla creazione di una scena di base è l'articolo Introduzione con Three.js di Paul Lewis
Un'indagine introduttiva più approfondita delle capacità di Three.js è l'eccellente presentazione di James Williams (un video e una presentazione) su Introduzione a WebGL e Three.js.
La documentazione di Three.js, disponibile su http://threejs.org/docs/, è un work in progress ma è un buon primo posto per avere un'idea per molte delle funzioni disponibili.
Un modo più completo per conoscere il funzionamento interno della biblioteca è quello di sfogliare il codice sorgente della raccolta ufficiale di esempi su http://threejs.org/examples/, che sono spesso intitolati dall'aspetto della biblioteca che hanno più caratteristica prominente. Un'altra risorsa, composta da esempi semplificati e dettagliati scritti per principianti, è la raccolta su http://stemkoski.github.io/Three.js/. Inoltre, molti progetti Three.js sono annunciati su Twitter con l'hashtag #ThreeJS o il subreddit Three.js.
Due collezioni particolarmente impressionanti e di grande ispirazione di progetti avanzati di Three.js sono:
Alcuni siti Web e blog che trattano lo sviluppo e spesso includono i progetti Three.js includono:
Per saperne di più sulle basi della grafica 3D, dai un'occhiata a Interactive 3D Graphics, un corso online gratuito insegnato da Eric Haines che prevede lezioni video e esercizi di programmazione interattiva usando Three.js.
Se è necessario incorporare funzionalità oltre a quelle fornite da Three.js, è facile (e pratica comune) incorporare librerie Javascript aggiuntive, come ad esempio:
Se si desidera creare effetti grafici avanzati oltre a quelli inclusi in Three.js, è necessario imparare a scrivere shader, che sono funzioni eseguite direttamente sulla GPU. Due eccellenti introduzioni agli shader, scritte appositamente per gli utenti di Three.js, sono:
Infine, se sei interessato a implementare il tuo progetto per Android o iOS, CocoonJS di Ludei è una piattaforma che fa esattamente questo. Il processo è ben documentato e relativamente facile, poiché la maggior parte del lavoro è automatizzata dal sistema di compilazione cloud CocoonJS.
Se hai una domanda che non riesci a capire guardando gli esempi o le risorse di cui sopra, il posto dove cercare aiuto è Stack Overflow, il sito di domande e risposte di prima qualità per programmatori professionisti ed entusiasti. Per prima cosa, cerca se la tua domanda è già stata posta; in caso contrario, registrati per un account e chiedilo lì!
Con queste risorse a tua disposizione, è ora di iniziare a creare! Three.js ha una comunità attiva e vivace, quindi dovresti sempre sentirti libero di fare domande, partecipare alle discussioni e mostrare il tuo lavoro. La migliore fortuna per te nei tuoi sforzi!
Accentsconagua