Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Luci e materiali con Three.js

Definire il materiale dei modelli 3D e impostare i punti di illuminazione della scena
Definire il materiale dei modelli 3D e impostare i punti di illuminazione della scena
Link copiato negli appunti

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

Ti consigliamo anche