Iluminación realista(luz del sol) con Three.js?

lighting

Question

Intento crear un pequeño juego en primera persona usando Three.js, pero estoy teniendo problemas con la iluminación. Básicamente quiero simular el sol y hacer que gire para arrojar luz sobre todo. Estoy usando THREE.DirectionalLight por el momento y solo se ilumina en una dirección, por lo que los lados de los cubos permanecen negros / oscuros.

¿Tengo que usar varias luces para que todo esté iluminado? ¿O podría de alguna manera reflejar la luz del suelo / objetos?

Answer 1

Sí, tendrás que usar múltiples luces para lograr esto, fingiendo la luz reflejada. La computación de la luz reflejada real no está incorporada (y computacionalmente muy compleja / costosa). Tienes una variedad de opciones.

Una segunda luz direccional que siempre podría estar en la posición y dirección opuestas de su sol.

Una luz hemisférica que permanece constante. La iluminación hemisférica obtiene un color del cielo y un color de fondo e intensidad y agrega un poco más de profundidad a su iluminación.

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

Aquí hay un ejemplo de trabajo http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

podría usar cualquier combinación de luces diferentes, pero tenga cuidado de que haya una compensación de rendimiento.

También vale la pena mencionar el sombreado de media lambert, que se habilita configurando la propiedad wrapAround en verdadero en su material. Esto da una caída más agradable al negro que da como resultado una iluminación menos dura. Más tonos medios y menos negros.

Answer 2

Usé una combinación de estas dos luces para crear este 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;