Building a World - Game Development with Three.js - page 26

Type Constructor Description

Spot

THREE.SpotLight(color,
intensity, radius = 0,
coneAngle = Math.PI / 3,
falloff = 10)

It emanates from a specific point
in space in a specific direction.
It illuminates objects in a cone
pointing in its direction of rotation,
falling off exponentially within a
distance of radius .

To update our procedural city scene with lighting, let's first change the buildings'
material to respond to light:

var material = new THREE.MeshPhongMaterial({overdraw: true, color:
0xcccccc});

Then we'll add our light to the scene:

var light = new THREE.DirectionalLight(0xf6e86d, 1);
light.position.set(1, 3, 2);
scene.add(light);

For directional lights, the direction of the light is the direction from light.position
to light.target.position ; both are vectors that you can change, and the target
defaults to the world's origin.

Let's also change our renderer to WebGL because CanvasRenderer does not
support advanced lighting features such as shadows and fog, which we'll
want to add momentarily:

renderer = new THREE.WebGLRenderer();

As a final touch now that our scene has lighting, let's add fog for a little ambiance:

scene.fog = new THREE.FogExp2(0x9db3b5, 0.002);

There are actually two kinds of fog. FoxExp2 gets exponentially denser with distance,
and appropriately its parameters are color and density exponent (a small decimal
you will need to play around with depending on the scale of your world). The
other kind of fog is THREE.Fog , which gets denser linearly; its parameters are color,
minimum distance at which fog starts appearing, and maximum distance beyond
which objects will be occluded by fog. For example:

scene.fog = new THREE.Fog(0x9db3b5, 0, 800);