Illuminazione realistica (luce solare) con Three.js?

Question

Sto tentando di creare un piccolo gioco in prima persona utilizzando Three.js, ma ho problemi con l'illuminazione. Fondamentalmente voglio simulare il sole e farlo girare ruotando la luce su tutto. Sto usando THREE.DirectionalLight al momento e si illumina solo in una direzione in modo che i lati dei cubetti rimangano neri/scuri.

Devo utilizzare più luci in modo che tutto sia illuminato? O potrei in qualche modo riflettere la luce da terra/oggetti?

Answer 1

Sì, sarà necessario utilizzare più luci per raggiungere questo obiettivo, simulando la luce riflessa. L'elaborazione della luce riflessa reale non è incorporata (e computazionalmente molto complessa/costosa). Hai una varietà di opzioni.

Una seconda luce direzionale che potrebbe essere sempre nella posizione opposta e direzione del vostro sole.

Una luce dell'emisfero che rimane costante. L'illuminazione dell'emisfero assume un colore del cielo, un colore e un'intensità del terreno e aggiunge un tocco di profondità alla tua illuminazione.

//         sky color ground color intensity 
hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6); 

ecco un esempio di lavoro http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

è possibile utilizzare qualsiasi combinazione di diverse luci ma attenzione c'è un trade off prestazioni.

Vale anche la pena di menzionare l'ombreggiatura a mezzo lambert che viene abilitata impostando la proprietà wrapAround su true nel materiale. Ciò fornisce una riduzione più gradevole al nero che si traduce in un'illuminazione meno dura. Più toni medi e meno neri.

Answer 2

ho usato una combinazione di questi due luci per creare questo video: http://www.youtube.com/watch?v=m68FDmU0wGw

  var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); 
      hemiLight.color.setHSV(0.6, 0.75, 0.5); 
      hemiLight.groundColor.setHSV(0.095, 0.5, 0.5); 
      hemiLight.position.set(0, 500, 0); 
      scene.add(hemiLight); 

      var dirLight = new THREE.DirectionalLight(0xffffff, 1); 
      dirLight.position.set(-1, 0.75, 1); 
      dirLight.position.multiplyScalar(50); 
      dirLight.name = "dirlight"; 
      // dirLight.shadowCameraVisible = true; 

      scene.add(dirLight); 

      dirLight.castShadow = true; 
      dirLight.shadowMapWidth = dirLight.shadowMapHeight = 1024*2; 

      var d = 300; 

      dirLight.shadowCameraLeft = -d; 
      dirLight.shadowCameraRight = d; 
      dirLight.shadowCameraTop = d; 
      dirLight.shadowCameraBottom = -d; 

      dirLight.shadowCameraFar = 3500; 
      dirLight.shadowBias = -0.0001; 
      dirLight.shadowDarkness = 0.35;