Introduzione
Ho utilizzato Three.js per alcuni dei miei esperimenti e mi ha aiutato molto a risolvere i problemi di iniziare a utilizzare il 3D nel browser. Con esso puoi creare fotocamere, oggetti, luci, materiali e altro ancora. Puoi anche scegliere il renderer, il che significa che puoi decidere se la scena deve essere disegnata utilizzando il canvas di HTML 5, WebGL o SVG. E poiché è open source, puoi anche partecipare al progetto. Per il momento, però, mi concentrerò su ciò che ho imparato giocandoci come motore e ti illustrerò alcune nozioni di base.
Nonostante la grandezza di Three.js, a volte potresti riscontrare dei problemi. In genere, dovrai dedicare molto tempo agli esempi, al reverse engineering e (nel mio caso certamente) alla ricerca di funzionalità specifiche e, di tanto in tanto, fare domande tramite GitHub. A proposito, se hai domande, ho scoperto che Mr. doob e AlteredQualia sono estremamente utili.
1. Nozioni di base
Presumo che tu abbia almeno una conoscenza di base del 3D e una buona padronanza di JavaScript. In caso contrario, ti consigliamo di informarti un po' prima di provare e utilizzare questi elementi, in quanto possono creare un po' di confusione.
Nel nostro mondo 3D avremo alcuni dei seguenti elementi, per i quali ti guiderò nella procedura di creazione:
- Una scena
- Un renderer
- Una videocamera
- Uno o due oggetti (con materiali)
Puoi, ovviamente, fare cose interessanti e spero che tu lo faccia e inizi a sperimentare con il 3D nel tuo browser.
2. Assistenza
Una breve nota sull'assistenza nei browser. Secondo la mia esperienza, il browser Chrome di Google è il miglior browser da utilizzare in termini di renderer supportati e velocità del motore JavaScript sottostante. Chrome supporta Canvas, WebGL e SVG ed è incredibilmente veloce. Firefox è un buon secondo, con l'avvento della versione 4. Il suo motore JavaScript sembra essere un po' più lento di quello di Chrome, ma il supporto delle tecnologie di rendering è ottimo. Opera e Safari sono in procinto di aggiungere il supporto di WebGL, ma le loro versioni attuali supportano solo Canvas. Internet Explorer (versione 9 e successive) supporta solo il rendering della tela e non ho sentito parlare di piani di Microsoft per aggiungere funzionalità WebGL.
3. Creare la scena
Suppongo che tu abbia scelto un browser che supporti tutte le tecnologie di rendering e che tu voglia eseguire il rendering con canvas o WebGL, poiché sono le scelte più standard. Canvas è supportato più ampiamente di WebGL, ma è importante notare che WebGL viene eseguito sulla GPU della scheda grafica, il che significa che la CPU può concentrarsi su altre attività non di rendering, come qualsiasi interazione con la fisica o con l'utente che stai tentando di eseguire.
Indipendentemente dal renderer scelto, tieni presente che il codice JavaScript dovrà essere ottimizzato per il rendimento. Il 3D non è un'attività leggera per un browser (ed è fantastico che sia persino possibile), quindi fai attenzione a capire dove si trovano eventuali bottleneck nel codice e rimuovili se puoi.
Detto questo, e supponendo che tu abbia scaricato e incluso three.js nel tuo file HTML, come fai a configurare una scena? Esempio:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Non è troppo complicato.
4. Creazione di una mesh
Abbiamo quindi una scena, una fotocamera e un renderer (nel mio codice di esempio ho optato per uno WebGL), ma non abbiamo nulla da disegnare. Three.js supporta il caricamento di alcuni tipi di file standard diversi, il che è ottimo se esporti modelli da Blender, Maya, Cinema4D o altri software. Per semplicità (in fin dei conti, si tratta di iniziare!) Parlerò di primitive. I primitivi sono mesh geometrici, relativamente semplici come sfere, piani, cubi e cilindri. Three.js ti consente di creare facilmente questi tipi di primitive:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Va bene, ma che materiale hai scelto per la sfera? Nel codice abbiamo utilizzato una variabile sphereMaterial, ma non l'abbiamo ancora definita. Per prima cosa dobbiamo parlare dei materiali in modo più dettagliato.
5. Materiali
Senza dubbio, questa è una delle parti più utili di Three.js. Ti offre una serie di materiali comuni (e molto utili) da applicare ai tuoi mesh:
- "Base", il che significa semplicemente che viene visualizzato "non illuminato"
- Lambert
- Phong
Ce ne sono altri, ma per semplicità ti lascerò scoprirli da solo. Nel caso di WebGL, in particolare, questi materiali possono essere di grande aiuto. Perché? Perché in WebGL devi scrivere shader per tutto ciò che viene visualizzato. Gli shader sono un argomento molto vasto, ma in breve sono scritti in GLSL (OpenGL Shader Language), che indica alla GPU come deve apparire qualcosa. Ciò significa che devi imitare la matematica dell'illuminazione, della riflessione e così via. Può diventare molto complicato molto rapidamente. Grazie a Three.js non devi farlo se non vuoi, perché lo fa per te. Tuttavia, se vuoi scrivere shader, puoi farlo anche con un MeshShaderMaterial, quindi si tratta di una configurazione flessibile.
Per il momento, però, applichiamo un materiale lambert alla sfera:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Vale la pena sottolineare che esistono altre proprietà che puoi specificare quando crei un materiale oltre al colore, come le mappe di smoothing o dell'ambiente. Ti consigliamo di consultare la pagina Wiki per conoscere le varie proprietà che puoi impostare sui materiali e, in effetti, su qualsiasi oggetto fornito dal motore. Di recente è nato anche threejs.org, che offre una visualizzazione più accattivante dell'API.
6. Luci!
Se esegui il rendering della scena in questo momento, vedrai un cerchio rosso. Anche se abbiamo applicato un materiale Lambert, non c'è luce nella scena, quindi per impostazione predefinita Three.js tornerà a una luce ambientale completa, che è la stessa della colorazione piatta. Risolviamo il problema con un semplice punto di luce:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Esegui il rendering
Ora abbiamo tutto pronto per il rendering. Ma in realtà dobbiamo procedere e fare proprio questo:
// draw!
renderer.render(scene, camera);
Probabilmente, però, vorrai eseguire il rendering più di una volta, quindi se vuoi eseguire un loop dovresti utilizzare requestAnimationFrame; è di gran lunga il modo più intelligente per gestire l'animazione nel browser. Non è ancora completamente supportato, quindi ti consiglio vivamente di dare un'occhiata allo shim di Paul Irish.
8. Proprietà comuni degli oggetti
Se dai un'occhiata al codice di Three.js, vedrai che molti oggetti "ereditano" da Object3D. Si tratta di un oggetto di base che contiene alcune proprietà molto utili, come le informazioni su posizione, rotazione e scala. In particolare, la nostra sfera è un mesh che eredita da Object3D, a cui aggiunge le proprie proprietà: geometria e materiali. Perché ne parlo? È improbabile che tu voglia avere solo una sfera sullo schermo che non fa nulla e queste proprietà meritano di essere esaminate perché ti consentono di manipolare i dettagli sottostanti delle maglie e dei materiali al volo.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Dirty Little Secrets
Volevo solo segnalare un piccolo problema di Three.js: se modifichi, ad esempio, i vertici di una mesh, nel loop di rendering noterai che non cambia nulla. Perché? Perché Three.js (per quanto ne so) memorizza nella cache i dati di una mesh come operazione di ottimizzazione. Devi solo segnalare a Three.js che qualcosa è cambiato in modo che possa ricalcolare ciò che è necessario. A tal fine, puoi utilizzare:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Esistono altri strumenti, ma questi due sono i più utili che ho trovato. Ovviamente, devi contrassegnare solo le cose che sono cambiate per evitare calcoli non necessari.
Conclusione
Spero che questa breve introduzione a Three.js ti sia stata utile. Non c'è niente di meglio che sporcarsi le mani e provare qualcosa e non posso che consigliarlo vivamente. Il 3D eseguito in modo nativo nel browser è molto divertente e l'utilizzo di un motore come Three.js ti evita molti problemi e ti consente di creare contenuti davvero fantastici. Per aiutarti un po', ho incluso il codice sorgente in questo articolo del lab, in modo che tu possa usarlo come riferimento. Se ti è piaciuto, fammi sapere su Twitter, è sempre un piacere salutare i fan.