Share
La complessità del Web cambia ogni giorno e le sue possibilità crescono altrettanto rapidamente; in particolare con il rendering 3D. WebGL (Web Graphics Library) è un'API JavaScript per il rendering di grafica 3D e 2D interattiva. Three.js di Ricardo Cabello è una libreria basata su WebGL, che garantisce che il codice creato sia compatibile su vari browser.
Three.js è per WebGL ciò che jQuery è per JavaScript, offrendo sintassi dichiarativa amata da così tanti e allontanando il mal di testa per il 3D nel browser. Rivediamolo, ottieni una panoramica generale della sintassi e scopri come iniziare se sei nuovo nel gioco del 3D.
Dai un'occhiata alla seguente demo su CodePen; usa il cursore del mouse per trascinare il modello, ingrandire e rimpicciolire con la rotellina del mouse.
Lavoreremo in CodePen per motivi di semplicità; inizia collegandoti a Three.js (CDN 126Kb) dalla tua scheda JS.
Iniziamo creando una scena, proprio come si inizia con una tela in Photoshop. Una scena viene definita con una variabile prima che venga creato qualsiasi altro codice. Quindi, all'interno del tuo pannello JS aggiungi:
var scene = new THREE.Scene ();
Con le tende alzate e pronte per le nostre prestazioni avremo bisogno di un modo per vedere il nostro tempo meraviglioso per introdurre una fotocamera. Ci sono una serie di telecamere in cui Three.js viene fornito in bundle, ad esempio PerspectiveCamera, StereoCamera, OrthographicCamera e CubeCamera. Per i nostri scopi useremo il PerspectiveCamera in quanto è progettato per imitare il modo in cui l'occhio umano vede. Proprio come definiamo una scena con una variabile, facciamo lo stesso per definire una telecamera:
var camera = new THREE.PerspectiveCamera ();
La nostra PerspectiveCamera accetta quattro argomenti: fov, aspetto, vicino e lontano.
Accentsconagua
fov (campo visivo) è quanto puoi vedere attorno al centro della fotocamera. Pensa in termini di un obiettivo grandangolare su una fotocamera rispetto a un obiettivo standard. aspetto è il rapporto di fov, o in altre parole la larghezza in altezza di uno schermo (ad es. 4: 5, 16: 9). vicino e lontano, sono i piani di un solido. Insieme controllano se un oggetto è reso in base alla sua distanza dalla telecamera. vicino è il più vicino a cui un oggetto o una parte di un oggetto può essere rivolto verso la telecamera mentre è ancora in fase di rendering, lontano è il più lontano che un oggetto può essere dalla fotocamera e deve ancora essere reso. Insieme, questi definiscono il trofeo visivo della fotocamera.
Visualizzazione del troncoEcco un esempio di PerspectiveCamera argomenti:
var camera = new THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0.1, 1000);
Non è importante capire ogni valore a questo punto eccetto che essere consapevoli dei valori può essere passato. Proseguendo, dovremo impostare la posizione della telecamera.
camera.position.set (x, y, z);
Questa linea è la posizione locale dell'oggetto. Questo imposta il X, y e z coordinate del vettore. Senza di esso la telecamera non vedrà nulla.
Il prossimo ingrediente importante nella nostra ricetta è creare un WebGLRenderer. Questo è il pezzo responsabile della magia di mostrare la tua creazione.
var renderer = new THREE.WebGLRenderer ();
Il WebGLRenderer può anche accettare proprietà e valori passati come oggetto.
var renderer = new THREE.WebGLRenderer (alpha: true // rimuovi canvas 'bg color);
ce ne sono un bel pò costo dell'immobile coppie che possono essere utilizzate - sono elencate nei documenti se dovessi decidere di immergerti più a fondo in un secondo momento (cosa che incoraggio fortemente).
Con il renderer definito possiamo impostare metodi per personalizzare ulteriormente la nostra creazione come setSize; un metodo che utilizzerai in quasi tutti i progetti Three.js.
// Crea renderer di scene con le dimensioni dello schermo renderer.setSize (window.innerWidth, window.innerHeight);
Ci sono molti altri metodi che puoi usare, ma per i nostri scopi ci atterremo setSize ().
Ora che la nostra dimensione desiderata è definita, avremo bisogno di un modo per collegarlo al DOM.
document.body.appendChild (renderer.domElement);
Questo DOMElement la proprietà è dove il renderer disegna la sua uscita e sarà nella forma di a tela elemento. Anche se sto usando document.body potresti aggiungere o anteporre il tela elemento ovunque tu voglia. Dipende davvero da te dove desideri il posizionamento in base alle tue specifiche esigenze di progetto.
Per il prossimo passo abbiamo bisogno di creare un oggetto, dal momento che tutto ciò che abbiamo fatto fino a questo punto è dichiarare una scena, una macchina fotografica e un riproduttore. Per scopi dimostrativi, prendi un telefono cellulare da 3D Warehouse in modo da poter creare un visualizzatore di prodotti per le persone che acquistano un iPhone online.
iPhone 6+ di Jeremie PIn genere puoi utilizzare applicazioni come SketchUp o persino Blender per disegnare i tuoi oggetti 3D, tuttavia c'è un'alta curva di apprendimento per le applicazioni di disegno 3D, una curva che è certamente al di fuori degli scopi di questo articolo.
Per inserire il nostro oggetto 3D sulla scena dobbiamo usare il ColladaLoader. Va detto che qualsiasi immagine che decidi di utilizzare dovrebbe in genere puntare ad essere inferiore a 1-2Mb e deve essere un file Collada per poter essere utilizzato con Three.js: questi sono file che terminano con .dae estensione. Se apri un file Collada, vedrai che è effettivamente scritto in XML.
Iniziamo definendo il ColladaLoader utilizzando una variabile e chiamando il metodo insieme alla definizione di un'altra variabile per rappresentare la grafica 3D per il riferimento in un momento successivo.
var dae, // loader grafico = new THREE.ColladaLoader (); // loader
Questo è un ottimo inizio, ma abbiamo ancora del lavoro da fare per farci visualizzare il telefono. Facciamo una funzione che farà proprio questo:
function loadCollada (collada) dae = collada.scene; scene.add (dae);
Per il prossimo passo useremo il caricare metodo, passare l'URL del nostro file Collada e quindi chiamare la nostra funzione per nome come secondo argomento:
loader.load ('http://myurl.com/file/iphone6.dae', loadCollada);Se desideri saperne di più su ColladaLoader puoi scavare attraverso il codice sorgente su GitHub.
Con il nostro caricatore e la grafica finalmente sul posto, c'è un ultimo passaggio; abbiamo bisogno di creare quello che viene chiamato un "ciclo di rendering". Questo perché in realtà non stiamo ancora rendendo nulla.
Questo "ciclo di rendering" è ciò che farà sì che il renderer disegni la scena sessanta volte al secondo. La seguente funzione renderà viva la nostra creazione (la parte migliore dell'intero processo).
function renderPhone () requestAnimationFrame (renderPhone); renderer.render (scene, camera); renderPhone ();
requestAnimationFrame ha una serie di vantaggi Il più importante è che si interrompe quando l'utente naviga verso un'altra scheda del browser, in ultima analisi, non sprecando la sua potenza di elaborazione e la durata della batteria.
Il risultato di tutto questo lavoro è un dolce rendering di un iPhone 3D che puoi ruotare, ruotare e ingrandire e ridurre:
Ci sono alcuni altri bit che sono entrati nella creazione finale, quindi ti invito ad approfondire ulteriormente il pannello JavaScript della demo.
Per esempio; Illuminazione (Luce ambientale, HemisphereLight, PointLight), TrackballControls, AxisHelper e un evento di ridimensionamento della finestra. Alcuni di questi articoli citati non contengono documentazione come TrackballControls, ma puoi trovare tutte le proprietà disponibili nel file JS di base su GitHub. Ci sono altri controlli davvero fantastici che puoi usare, che sono elencati anche su GitHub.
A volte hai bisogno di un po 'di ispirazione per far sì che il cervello faccia esplodere le idee a un ritmo rapido. Le seguenti sono alcune delle mie demo preferite che utilizzano Three.js che trasformano i sogni in realtà.
https://paperplanes.world
https://throughthedark.withgoogle.com (prendi le tue cuffie)
http://carvisualizer.plus360degrees.com/threejsRachel Smith ha scritto un ottimo articolo su CodePen su WebGL e consiglio vivamente di dargli una lettura quando hai tempo libero. Il tutorial è pieno di un linguaggio semplice ed è una spiegazione completa di Three.js che discute di scena, geometria, illuminazione, materiali e animazione che non ho certamente potuto coprire in questo breve post.
Si può anche godere di:
Questo articolo non sarebbe stato possibile senza il generoso aiuto della comunità Animation at Work Slack, quindi vorrei ringraziare (in nessun ordine particolare) Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch e Chris Johnson.
