Realistische Beleuchtung (Sonnenlicht) mit Three.js?

Question

Ich versuche ein kleines 1st-Person-Spiel mit Three.js zu erstellen, aber ich habe Probleme mit der Beleuchtung. Grundsätzlich möchte ich die Sonne simulieren und sie drehen lassen, um Licht auf alles zu werfen. Ich benutze THREE.DirectionalLight im Moment und es leuchtet nur die eine Richtung, so dass die Seiten der Würfel schwarz/dunkel bleiben.

Muss ich mehrere Lichter verwenden, damit alles aufleuchtet? Oder könnte ich irgendwie Licht vom Boden/von Objekten reflektieren?

Answer 1

Ja, Sie müssen mehrere Lichter verwenden, um dies zu erreichen, indem Sie das reflektierte Licht fälschen. Die Berechnung von echtem reflektiertem Licht ist nicht eingebaut (und rechnerisch sehr komplex/teuer). Sie haben eine Vielzahl von Optionen.

Ein zweites gerichtetes Licht, das immer in der entgegengesetzten Position und Richtung Ihrer Sonne sein könnte.

Ein Hemisphärenlicht, das konstant bleibt. Hemisphäre-Beleuchtung erhält eine Himmelfarbe und eine Grundfarbe und -intensität und fügt Ihrer Beleuchtung ein nettes Extrabit der Tiefe hinzu.

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

hier ist ein funktionierendes Beispiel http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

Sie eine beliebige Kombination unterschiedlicher Leuchten verwenden könnte aber vorsichtig sein, eine Leistung Kompromiss gibt.

Erwähnenswert ist auch die Halflambert-Schattierung, die durch Setzen der wrapAround-Eigenschaft in Ihrem Material auf true gesetzt wird. Dies ergibt einen schöneren Schwarzabtrag, der zu einer weniger harten Beleuchtung führt. Mehr Mitteltöne und weniger Schwarz.

Answer 2

habe ich eine Kombination dieser beiden Lichter dieses Video zu erstellen: 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;