Реалистичное освещение (солнечный свет) с помощью Three.js?

Question

Я пытаюсь создать небольшую игру из 1-го лица, используя Three.js, но у меня проблемы с освещением. В принципе, я хочу симулировать солнце и заставить его вращаться вокруг света. Я использую THREE.DirectionalLight в данный момент, и он только загорается в одном направлении, так что стороны кубов остаются черными/темными.

Должен ли я использовать несколько источников света, чтобы все было освещено? Или я мог каким-то образом отразить свет от земли/объектов?

Answer 1

Да, вам нужно использовать несколько огней для достижения этого, притворяя отраженный свет. Вычисление реального отраженного света не строится (и вычислительно очень сложно/дорого). У вас есть множество вариантов.

Второй направленный свет, который всегда может находиться в противоположном положении и направлении вашего солнца.

Свет полусферы, который остается постоянным. Освещение в полушарии приобретает цвет неба и основной цвет и интенсивность и добавляет приятный дополнительный бит глубины вашему освещению.

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

вот рабочий пример http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

вы можете использовать любую комбинацию различных огней, но будьте осторожны, есть динамика торговли прочь.

Также стоит упомянуть полу-ламберт-затенение, которое включено, установив для свойства wrapAround значение true в вашем материале. Это дает более приятный спад черным, что приводит к менее резкому освещению. Более средние тона и меньше черных.

Answer 2

я использовал комбинацию этих двух огней, чтобы создать это видео: 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;