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 |