Share
La grafica 3D nel browser è stata un tema caldo fin dalla sua introduzione. Ma se dovessi creare le tue app usando semplicemente WebGL, ci vorrebbero anni. Questo è esattamente il motivo per cui sono state recentemente create alcune librerie davvero utili. Three.js è uno dei più popolari e in questa serie ti mostrerò come utilizzarlo al meglio per creare incredibili esperienze 3D per i tuoi utenti.
Prima di iniziare, mi aspetto che tu abbia una conoscenza di base dello spazio 3D prima di iniziare a leggere questo tutorial, poiché non spiegherò cose come coordinate, vettori, ecc..
Innanzitutto, crea tre file: index.html, main.js e style.css. Ora scarica Three.js (intero file zip con esempi e fonte o solo il file JavaScript, a tua scelta). Ora aperto index.html e inserisci questo codice:
Questo è tutto ciò che ti serve in questo file. Solo una dichiarazione di script e fogli di stile. Tutta la magia accadrà main.js, ma prima di arrivare a quello abbiamo bisogno di un altro trucco per rendere l'app un bell'aspetto. Aperto style.css e inserisci questo codice:
canvas position: fixed; inizio: 0; a sinistra: 0;
Questo posizionerà la tela nell'angolo in alto a sinistra, perché di default il corpo avrà 8px di margine. Ora possiamo procedere con il codice JavaScript.
Three.js utilizza il concetto di una lista di visualizzazione. Significa che tutti gli oggetti sono memorizzati nella lista e quindi disegnati sullo schermo.
Three.js utilizza il concetto di una lista di visualizzazione. Ciò significa che tutti gli oggetti sono memorizzati nell'elenco e quindi disegnati sullo schermo. Ecco, questo è un THREE.Scene oggetto. È necessario aggiungere qualsiasi oggetto che si desidera venga disegnato sullo schermo alla scena. Puoi avere quante scene vuoi, ma un riproduttore può disegnare solo una scena alla volta (ovviamente puoi cambiare la scena che viene visualizzata).
Il renderer disegna semplicemente tutto dalla scena alla tela WebGL. Three.js supporta anche il disegno su SVG o 2D Canvas, ma ci concentreremo su WebGL.
Per iniziare, consente di memorizzare la larghezza e l'altezza della finestra in variabili, le useremo in seguito:
var width = window.innerWidth; var height = window.innerHeight;
Ora definisci il renderer e la scena:
var renderer = new THREE.WebGLRenderer (antialias: true); renderer.setSize (larghezza, altezza); document.body.appendChild (renderer.domElement); var scene = new THREE.Scene;
La prima riga definisce il renderer WebGL. È possibile passare le opzioni del programma di rendering nel primo argomento come una mappa. Qui, abbiamo impostato il antialias a vero, perché vogliamo che i bordi degli oggetti siano lisci, non frastagliati.
La seconda riga imposta la dimensione del renderer sulla dimensione della finestra e nella terza aggiungiamo il renderer tela elemento al documento (puoi farlo anche usando una libreria, come jQuery: $ ( 'Body'). Accodare (renderer.domElement)).
L'ultimo definisce la scena, non sono necessari argomenti.
Ora consente di aggiungere qualcosa da disegnare. Lascia che sia un cubo, poiché è l'oggetto 3D più semplice. In Three.js gli oggetti che vengono disegnati sullo schermo sono chiamati mesh. Ogni maglia deve avere la propria geometria e materiale. La geometria è un insieme di punti che devono essere collegati per creare l'oggetto. Il materiale è semplicemente la pittura (o la pittura, ma non è l'argomento di questo tutorial) che riguarderà l'oggetto. Quindi, creiamo il nostro cubo. Fortunatamente per noi ci sono alcune funzioni di supporto in Three.js per la creazione di primitive (forme semplici):
var cubeGeometry = new THREE.CubeGeometry (100, 100, 100); var cubeMaterial = new THREE.MeshLambertMaterial (color: 0x1ec876); var cube = new THREE.Mesh (cubeGeometry, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (cubo);
Come puoi vedere, prima creiamo la geometria. Gli argomenti definiscono una dimensione del cubo: larghezza, altezza e profondità.
Successivamente, definiamo il materiale del cubo. Ci sono alcuni tipi di materiale in Three.js, ma questa volta useremo il THREE.MeshLambertMaterial, dal momento che vogliamo avere un po 'di illuminazione in seguito (questo materiale utilizza l'algoritmo di Lambert per i calcoli della luce). Puoi passare le opzioni nel primo argomento come una mappa, come con il renderer. Questa è praticamente una regola per oggetti più complessi in Three.js. Qui, usiamo solo il colore, che viene passato come numero esadecimale.
Sulla terza riga, creiamo una mesh usando la geometria e il materiale creati in precedenza. Successivamente, ruotiamo il cubo di 45 gradi sull'asse Y, per renderlo migliore. Dobbiamo cambiare i gradi in radianti, che è gestito dall'equazione che probabilmente ricordi della tua classe di fisica delle scuole superiori: Math.PI * 45/180. Infine, il cubo viene aggiunto alla scena.
Ora puoi aprire index.html nel tuo browser per vedere i risultati, ma non vedrai nulla perché la scena non è ancora stata renderizzata.
Per eseguire il rendering di qualcosa, prima dobbiamo aggiungere la videocamera alla scena, in modo che il renderizzatore sappia da quale punto di vista dovrebbe rendere le cose. Ci sono alcuni tipi di telecamere in Three.js, ma probabilmente lo userai solo THREE.PerspectiveCamera. Questo tipo di fotocamera presenta la scena mentre vediamo il nostro mondo. Creiamo uno:
var camera = new THREE.PerspectiveCamera (45, larghezza / altezza, 0,1, 10000);
"Per eseguire il rendering di qualcosa, prima dobbiamo aggiungere la telecamera alla scena, in modo che il renderizzatore sappia da quale punto di vista dovrebbe rendere le cose."
La creazione della fotocamera è un po 'più complicata rispetto al resto delle cose che abbiamo fatto finora. Il primo argomento definisce il campo visivo (FOV), l'angolo che può essere visto da dove si trova la telecamera. Un campo visivo di 45 gradi sembra naturale. Successivamente, definiamo il rapporto della fotocamera. Questa è sempre la larghezza del renderer divisa per la sua altezza, a meno che tu non voglia ottenere alcuni effetti speciali. Gli ultimi due numeri definiscono quanto vicino e quanto lontano può essere l'oggetto alla macchina da disegnare.
Ora dobbiamo spostare la fotocamera indietro e in alto, poiché tutti gli oggetti creati in Three.js hanno la loro posizione impostata al centro della scena (x: 0, y: 0, z: 0) per impostazione predefinita:
camera.position.y = 160; camera.position.z = 400;
Il z la coordinata è positiva nella direzione del visualizzatore, quindi gli oggetti con una maggiore z la posizione apparirà più vicina a te (in questo caso, visto che abbiamo spostato la fotocamera, tutti gli oggetti appariranno più lontani da te).
Ora, consente di aggiungere la telecamera alla scena e renderla:
scene.add (telecamera); renderer.render (scene, camera);
Aggiungi la videocamera proprio come hai aggiunto il cubo. La riga successiva rende la scena usando questa fotocamera. Ora puoi aprire il browser e dovresti vedere quanto segue:
Dovresti solo essere in grado di vedere la parte superiore del cubo. Questo perché abbiamo spostato la fotocamera ed è ferma analizzare, cercare, guardare direttamente di fronte ad esso. Questo può essere risolto lasciando che la fotocamera sappia su quale posizione dovrebbe Guarda. Aggiungi questa linea dopo le linee che impostano la posizione della telecamera:
camera.lookAt (cube.position);
L'unica discussione passata è una posizione in cui la fotocamera apparirà. Ora, la scena sembra migliore, ma il cubo è ancora nero, indipendentemente dal colore che hai impostato durante la creazione:
Il cubo è nero, perché non ci sono luci sulla scena, quindi è come una stanza completamente nera. Si vede uno sfondo bianco perché non c'è nulla da separare dal cubo. Per evitare ciò, useremo una tecnica chiamata skybox. Fondamentalmente, aggiungeremo un cubo grande che visualizzerà lo sfondo della scena (di solito un terreno molto lontano se si tratta di uno spazio aperto). Quindi, creiamo la scatola. Questo codice dovrebbe andare prima del renderer.render chiamata:
var skyboxGeometry = new THREE.CubeGeometry (10000, 10000, 10000); var skyboxMaterial = new THREE.MeshBasicMaterial (color: 0x000000, side: THREE.BackSide); var skybox = new THREE.Mesh (skyboxGeometry, skyboxMaterial); scene.add (skybox);
Questo codice è simile a quello che crea il cubo. Ma questa volta la geometria è molto più grande. Abbiamo anche usato THREE.MeshBasicMaterial dal momento che non è necessario accendere lo skybox. Inoltre, nota l'argomento aggiuntivo passato al materiale: lato: THREE.BackSide. Dato che il cubo verrà visualizzato dall'interno, dobbiamo cambiare il lato che viene disegnato (normalmente, Three.js disegna solo muri esterni).
Ora la scena renderizzata è completamente nera. Per risolvere il problema dobbiamo aggiungere luce alla scena. Noi useremo THREE.PointLight, che emette la luce come una lampadina. Aggiungi queste righe dopo skybox:
var pointLight = new THREE.PointLight (0xffffff); pointLight.position.set (0, 300, 200); scene.add (PointLight);
Come puoi vedere, abbiamo creato la luce puntiforme con il colore bianco, quindi stiamo impostando la sua posizione per essere un po 'in alto e in basso, per illuminare la parte anteriore e la parte superiore del cubo. Finalmente la luce viene aggiunta alla scena come qualsiasi altro oggetto. Apri il browser e dovresti vedere un cubo colorato e ombreggiato:
Ma il cubo è ancora piuttosto noioso. Aggiungiamo un po 'di movimento ad esso.
Ora aggiungeremo un po 'di movimento alla scena. Consente al cubo di ruotare attorno all'asse Y. Ma prima, dobbiamo cambiare il modo in cui rendiamo la scena. Uno renderer.render chiama, restituisce lo stato corrente della scena una volta. Quindi, anche se animiamo il cubo in qualche modo, non lo vedremo muovere. Per cambiarlo, dobbiamo aggiungere il ciclo di rendering alla nostra app. Questo può essere ottenuto usando il renderAnimationFrame funzione, che è stata creata appositamente per questo scopo. È supportato nella maggior parte dei principali browser e, per quelli che non lo supportano, Three.js è dotato di un proprio polyfill. Quindi, lascia cambiare questo:
renderer.render (scene, camera);
a questo:
function render () renderer.render (scene, camera); requestAnimationFrame (rendering); render ();
In realtà, non ci sono loop in là, perché congelerebbe il browser. Il requestAnimationFrame la funzione si comporta un po 'come setTimeout, ma sta chiamando la funzione passata così veloce come il browser è pronto. Quindi, nulla è cambiato nella scena visualizzata e il cubo non si muove ancora. Risolviamolo. Three.js viene fornito con THREE.Clock che può essere utilizzato per ottenere un'animazione fluida degli oggetti. Innanzitutto, inizializzalo prima del rendere definizione della funzione:
var clock = new THREE.Clock;
Ora, ogni volta che chiami clock.getDelta restituirà l'ora dall'ultima chiamata, in millisecondi. Questo può essere usato per ruotare il cubo in questo modo:
cube.rotation.y - = clock.getDelta ();
Aggiungi questa linea tra il renderer.render e il requestAnimationFrame chiama nel rendere funzione. Si tratta semplicemente di sottrarre il tempo passato dalla rotazione del cubo sull'asse Y (ricorda che è in radianti) per ruotare il cubo in senso orario. Ora apri il browser e dovresti vedere il tuo cubo ruotando in senso orario.
In questa parte della serie hai imparato come preparare la scena, aggiungere oggetti e luci e come animare le cose. Puoi sperimentare con l'app, aggiungere più o diversi oggetti, luci. Tocca a voi. La prossima volta ti mostrerò come usare le trame e come creare dei bei effetti con le particelle. Non dimenticare di dare un'occhiata alla documentazione in caso di problemi.
Accentsconagua