Realistic lighting (sunlight) with Three.js?

Question

I\'m attempting to create a small 1st-person game using Three.js, but I\'m having trouble with the lighting. Basically I want to simulate the sun and have it rotate around casti

Answer 1

Yes, you'll have to use multiple lights to achieve this, faking the reflected light. Computing real reflected light isn't built in (and computationally very complex/expensive). You have a variety of options.

A second directional light that could always be in the opposite position and direction of your sun.

A hemisphere light that remains constant. Hemisphere lighting gets a sky color and a ground color and intensity and adds a nice extra bit of depth to your lighting.

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

here's a working example http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

you could use any combination of different lights but be careful there's a performance trade off.

It's also worth mentioning half-lambert shading which is enabled by setting the wrapAround property to true in your material. This gives a nicer falloff to black that results in less harsh lighting. More mid tones and less blacks.

Answer 2

I used a combination of these two lights to create this 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;