Abbiamo funzionalità nei nostri browser che non avremmo mai sognato di 5 o 10 anni fa. Interi mondi di giochi 3D possono essere eseguiti nel browser e i siti Web interattivi possono essere esperienze più coinvolgenti.
Con una certa azienda di realtà virtuale acquistata da una determinata società di social media, ora è il momento perfetto per iniziare a lavorare con il 3D. Sorprendentemente, ora possiamo creare 3D con JavaScript puro, inclusi mesh e materiali.
Naturalmente, anche se è possibile, richiede una quantità enorme di codice, ed è qui che entra in gioco Three.js, che ci consente di creare ambienti 3D in modo semplice e con meno codice.
Sfortunatamente, poiché è nuovo, 3D non è supportato da tutti i browser. Al momento siamo limitati a Chrome, Safari e Firefox.
Col passare del tempo, il supporto su IE migliorerà, ma per ora avrai bisogno di un fallback per i devoti di Microsoft.
La prima cosa che dobbiamo fare è andare al sito web three.js e scarica l'ultima versione della libreria.
Successivamente, fai riferimento alla parte superiore del documento come se fosse un qualsiasi altro file JavaScript e siamo pronti per partire.
La prima cosa che dobbiamo fare, renderizzare qualsiasi cosa con three.js è creare una scena, una macchina fotografica e un renderer. A partire da una scena:
var scene = new THREE.Scene();Successivamente, abbiamo bisogno di una telecamera. Pensa a questo come al punto di vista da cui l'utente sta guardando. Three.js in realtà ha molte opzioni qui, ma per semplicità useremo una telecamera prospettica:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Questo metodo richiede quattro parametri: il primo è il campo visivo, il secondo è il rapporto aspetto (consiglierei di basarlo sempre sulla finestra dell'utente), il piano di ritaglio vicino e infine il piano di ritaglio lontano. Questi ultimi due parametri determinano i limiti del rendering, in modo che gli oggetti troppo vicini o troppo lontani non vengano disegnati, il che potrebbe sprecare risorse.
In seguito, dobbiamo configurare il Renderer WebGL:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Come puoi vedere, la prima cosa da fare è creare un'istanza del renderer, quindi impostarne la dimensione sulla finestra dell'utente, infine la aggiungiamo alla pagina per creare una tela vuota con cui lavorare.
Finora, tutto ciò che abbiamo fatto è stato allestito, ora creeremo il nostro primo oggetto 3D.
Per questo tutorial sarà un semplice cilindro:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Questo metodo richiede anche 4 parametri: il primo è il raggio della parte superiore del cilindro, il secondo è il raggio del fondo del cilindro, il terzo è l'altezza, l'ultimo è il numero di segmenti di altezza.
Abbiamo impostato la matematica dell'oggetto, ora dobbiamo avvolgerlo in un materiale in modo che assomigli effettivamente a qualcosa sullo schermo:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Questo codice aggiunge un materiale semplice per l'oggetto, in questo caso un colore blu. Ho impostato wireframe su true perché mostrerà l'oggetto più chiaramente una volta che lo animeremo.
Infine, dobbiamo aggiungere il nostro cilindro alla nostra scena, in questo modo:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
L'ultima cosa da fare prima di rendere la scena è impostare la posizione della telecamera:
camera.position.z = 20;Come puoi vedere, JavaScript è estremamente semplice, perché Three.js si occupa di tutte le cose complicate, quindi non è necessario.
Se testerai il file in un browser ora vedrai che non sta succedendo nulla. Questo perché non abbiamo detto alla scena di rendere. Per rendere la scena abbiamo bisogno del seguente codice:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Se ora dai un'occhiata al file nel tuo browser vedrai che effettivamente esegue il rendering di un cilindro, ma non è molto eccitante.
Per migliorare davvero il valore del 3D devi iniziare l'animazione, cosa che possiamo fare con un paio di piccole modifiche alla nostra funzione di rendering :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Se esegui il test nel tuo browser ora vedrai un cilindro 3D correttamente animato.
Se vuoi vedere una demo e giocare con il codice che puoi fallo qui
Come puoi vedere, la creazione di questa scena (presumibilmente molto semplice) ha richiesto meno di due dozzine di righe di codice, e la matematica è davvero minima.
Se verifichi il esempi sul sito web three.js vedrai un lavoro incredibile che è stato fatto.
Questa fantastica libreria per JavaScript ha davvero abbassato il livello base per la codifica 3D al punto che chiunque possa scrivere JavaScript di base può essere coinvolto.
Immagine in primo piano / miniatura, Immagine 3D via Shutterstock.