Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

Come imparare Three.js per lo Sviluppo di Videogiochi

by
Length:MediumLanguages:

Italian (Italiano) translation by Chip (you can also view the original English article)

Three.js è una libreria/API open source in JavaScript che consente di creare e visualizzare animazioni 3D al computer su di un browser web compatibile con l'elemento canvas di HTML5, WebGL e SVG. In questo articolo della serie "Come Imparare", esploreremo le capacità di questo motore e condivideremo risorse e suggerimenti per aiutarti ad iniziare lo sviluppo di giochi con esso.


Perché usare Three.js?

Poiché Three.js è stato rilasciato da Ricardo Cabello su GitHub fin dal 2010, il suo codice base è stato continuamente mantenuto e valorizzato da una comunità in crescita e solidale. Il set di funzioni incorporate è ampia, e comprende:

  • motori di render (Canvas, WebGL, e SVG)
  • scene (possono essere cambiate a tempo di esecuzione, importate, ed esportate)
  • camere (prospettiva e ortogonale)
  • luci (punto, punto, direzionali e ambiente; gli oggetti possono lanciare/ricevere ombre)
  • texture e materiali (Lambert, Phong, ecc, incluso il supporto per bump maps e mappe speculari)
  • geometrie (comprese le linee, piani, cubi, sfere, poliedri, cilindri, sistemi di particelle, e testo 3D)
  • utility per esportazione compatibile con Three.js  File JSON provenienti da software di modellazione 3D (come Blender, 3ds Max, o Maya) ed importare i file (ad esempio come Wavefornt (obj) o Collada (.dae)) direttamente in una scena
  • shaders (fornisce accesso al OpenGL Shading Language per un controllo più diretto della pipeline grafica)
  • una libreria di shader di post-elaborazione (tra cui bloom, blur, il rilevamento dei bordi, Fresnel, seppia, e vignetta)
  • una libreria di effetti stereoscopici (anaglifi, Parallax/Cross-eyed, e Oculus Rift)

Oltre 100 esempi che illustrano queste caratteristiche (e oltre) sono inclusi nel repository principale, molti altri siti offrono collezioni di esempi disponibili con codice sorgente. Inoltre, dato che la biblioteca è scritta in JavaScript, è facile da installare, avviare, così come la distribuzione del vostro lavoro.


Giochi importanti e visualizzazioni

HexGL

Un gioco di corse futuristico creato da Thibaut Despoulain:


Trigger Rally

Un gioco di corse automobilistiche creato da Jasmine Kent:


Articoli di sviluppo correlati possono essere trovati nel blog di Jasmine Gamasutra.

ChuClone

Un platform 2.5D renderizzato in 3D, con un editor di livelli interno, creato da Mario Gonzalez:


Marble Table

Un gioco marble/calcetto creato da Jerome Etienne:

MarbleTable

Astray

Un gioco labirinto creato da Rye Terrell:

Astray

CubeSlam

Un gioco di ping-pong 3D che incorpora una video chat all'interno del gioco, creato da Google:


Ulteriori informazioni sono disponibili all'indirizzo di the game's Chrome Experiments e questo articolo dietro le quinte.

Find Your Way to OZ

Un viaggio interattivo creato da Walt Disney e UNIT9


Ulteriori informazioni sono disponibili all'indirizzo di the game's Chrome Experiments.


Iniziare

Poiché Three.js è una libreria JavaScript, impostare il vostro ambiente di sviluppo è particolarmente facile: gli unici requisiti sono un editor di testo ed un browser web. Detto questo, gli editor di testo con caratteristiche come l'evidenziazione della sintassi, completamento parentesi, mappa del documento, e così via - come Notepad++ o Sublime Text - offriranno una migliore esperienza di codifica.

Per quanto riguarda i browser web, sia Google Chrome che Mozilla Firefox hanno un eccellente supporto WebGL. Google Chrome ha un insieme particolarmente utile di strumenti integrati di sviluppo in grado di semplificare notevolmente il processo di workflow, come ad esempio una console che può essere utilizzata per il debug ed ispezionare i valori e oggetti Javascript e le impostazioni dell'area di lavoro che consentono di modificare e salvare i file di origine dall'interno del browser. Maggio informazioni possono essere trovate sul suto dei DevTools di Chrome

Tip: È anche possibile scrivere codice usando Three.js interamente online, utilizzando servizi come jsFiddle, come dimostrato da questo esempio. Tuttavia, questa opzione è in genere utilizzata solo per la condivisione di esempi o dimostrazioni con piccole quantità di codice.

Per installare Three.js, prima di tutto andare sul repository di GitHub. Ci sarà un pulsante che dice "Download ZIP" che vi permetterà di scaricare tutto il codice del repository come un file ZIP. (Ci sono altre alternative, come la clonazione o la generazione di un fork del repository utilizzando Git, che sono inutili per l'utente medio - queste opzioni sono principalmente utili solo se si ha intenzione di contribuire al codice sorgente o alla relativa documentazione.)

Dopo aver scaricato e decompresso il file in una directory di vostra scelta, rimane ancora un passo importante prima di visualizzare la maggior parte degli esempi sul proprio computer. Molti progetti Three.js coinvolgono il caricamento di contenuti da file esterni (come le immagini), ma, per motivi di sicurezza, i browser web limitano questo comportamento di default. Le due opzioni per risolvere questo problema sono modificare le impostazioni di sicurezza del browser web o eseguire i file da un server locale.

La prima opzione è la più semplice (ad esempio, la modifica delle impostazioni di Google Chrome in Windows può essere realizzato creando un collegamento per Chrome e modificare il percorso per includere il flag --allow-file-access-from-file). Le istruzioni per entrambe le opzioni possono essere trovate nel wiki ufficiale, nella pagina intitolata Come gestire le cose a livello locale.

JavaScript

Three.js è scritto in Javascript, quindi è consigliabile avere una conoscenza di questa linguaggio. Ci sono una miriade di risorse liberamente disponibili attraverso la rete internet per questo; due risorse interattive particolarmente importanti sono:

  • Codecademy, che contiene un gran numero di lezioni interattive con feedback reattivo e intelligente, nonché un glossario user-friendly
  • Eloquent Javascript, un libro di testo digitale gratuito scritto da Marijn Haverbeke, include un ambiente di codifica interattivo che esegue tutti esempi inclusi e permette al lettore di modificare e sperimentare con il codice di esempio

Three.js

Per informazioni su come impostare una scena di base Three.js (compresa una discussione sulle scene, camere, renderer, meshes e ciclo di animazione, visitare: il manuale ufficiale. Un altra grande introduzione alla creazione di una scena di base è l'articolo Introduzione a Three.js di Paul Lewis

Un'indagine più approfondita introduzione delle funzionalità di Three.js è la eccellente presentazione di James Williams (un video ed una presentazione) di Introduzione alla WebGL e Three.js.


Passi successivi

La documentazione Three.js, disponibile all'indirizzo http://threejs.org/docs/, è un work in progress, ma un buon primo punto per avere un'idea delle molte funzioni disponibili.

Un modo più completo per conoscere il funzionamento interno della biblioteca è quello di analizzare il codice sorgente della raccolta ufficiale di esempi a http://threejs.org/examples/, che sono spesso indicati dalla libreria stessa come la caratteristica più prominente. Un'altra risorsa, composta da esempi semplificati e accuratamente commentati scritta per i principianti, è la raccolta di http://stemkoski.github.io/Three.js/. Inoltre, molti progetti Three.js sono annunciati su Twitter con l'hashtag #ThreeJS o sul subreddit Three.js.

Due collezioni particolarmente impressionanti e ispirazione dei progetti Three.js avanzati sono:

Alcuni siti web e blog che trattano lo sviluppo e spesso dispongono di progetti Three.js sono:

Per saperne di più sulle basi della computer grafica 3D, controllare Interactive 3D Graphics, un corso online gratuito tenuto da Eric Haines che dispone di video lezioni ed esercizi di programmazione interattivi utilizzando Three.js.

Se avete bisogno di incorporare funzionalità oltre quelle fornite da Three.js, è facile (e la pratica comune) incorporare librerie Javascript aggiuntive, come ad esempio:

  • Tween.js: una libreria per i valori di interpolazione automatica, utile per animazioni fluide
  • Physi.js: un motore fisico progettato per l'uso con Three.js
  • dat.GUI: un'interfaccia utente grafica leggera per cambiare variabili
  • Gamepad.js: una libreria che semplifica l'elaborazione dell'ingresso da gamepad e joystick

Se si desidera creare effetti grafici avanzati oltre a quelli che sono inclusi con Three.js, è necessario imparare a scrivere shaders, che sono le funzioni che vengono eseguite direttamente sulla GPU. Due eccellenti introduzioni agli shader, scritte appositamente per gli utenti di Three.js, sono:

Infine, se siete interessati a distribuire il vostro progetto per Android o iOS, CocoonJS di Ludei è una piattaforma che fa esattamente questo. Il procedimento è ben documentato e relativamente facile, come la maggior parte del lavoro è automatizzato dal CocoonJS Cloud Compilation system.


Dove cercare aiuto

Se avete una domanda a cui non sapete rispondere cercando gli esempi o le risorse di cui sopra, il posto dove andare per un aiuto è Stack Overflow, il sito principale di domande e risposte per programmatori professionisti e appassionati. In primo luogo, cercate se la vostra domanda non è stata già fatta; in caso contrario, registrate un account e chiedere lì!


Conclusione

Con queste risorse a vostra disposizione, è il momento di iniziare a creare! Three.js ha una comunità attiva e vivace, quindi sentitevi sempre liberi di fare domande, partecipare alle discussioni, e mostrare il vostro lavoro. Buona fortuna per i vostri impegni!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.