Luci e materiali con Three.js

Dopo aver costruito la scena e posizionato gli oggetti, vediamo come definirne il materiale, Three.js mette a disposizione una discreta quantità di materiali diversi che possono essere associati alle mesh: ogni materiale ha delle proprietà peculiari, purtroppo la carenza di documentazione a tal proposito rende le cose più complicate, la scelta è ricaduta su MeshLambertMaterial che sembra supportare in modo efficace la gestione delle luci e dei colori.

Il parametro overdraw:true serve per evitare che vengano disegnate delle linee di confine tra i lati che compongono l'oggetto (un po' come succede nei wireframes). Una volta sviluppato il cubo dobbiamo accedere ai suoi vertici per modificarne l'altezza (y) facendola corrispondere a quanto ricevuto dall'array points passato come argomento alla funzione.

L'illuminazione

Una volta definiti gli oggetti necessari per la scena, possiamo dedicarci all'illuminazione: torniamo alla funzione di init e inseriamo qualche punto luce che possa dare un po' di atmosfera alla realizzazione:

var pointLight = new THREE.PointLight( 0xFFFFFF );
pointLight.position.x = 100;
pointLight.position.y = 300;
pointLight.position.z = 12;
pointLight.castShadow = true;
scene.add(pointLight);
var pointLight2 = new THREE.PointLight( 0xFFFFFF );
pointLight2.position.x = 500;
pointLight2.position.y = -400;
pointLight2.position.z = 130;
pointLight2.intensity = 1.5;
pointLight2.castShadow = true;
scene.add(pointLight2);

Il codice, assolutamente semplice ed interpretabile, posiziona due sorgenti luce di colore bianco all'interno della scena, entrambe le sorgenti sono di tipo PointLight, anche qui la scelta poteva ricadere su altri tipologie come:

Tipo di luce	Descrizione
AmbientLight	una luce ambientale diffusa in modo uniforme su tutta la scena
SpotLight	a differenza della PointLight, che parte da un punto definito e si spande a 360° nell'ambiente, questo tipo di luce richiede anche l'impostazione di un target e si comporta come un faretto da palcoscenico