Lights and Custom Shaders - Three.js - page 217

1. Before we look at THREE.SpotLight , the first thing we need to do is tell the
renderer that we want to enable shadows. To do this, set the following prop-
erty on THREE.WebGLRenderer :
renderer.shadowMapEnabled = true;
2. The next step is to inform Three.js which objects cast shadows and which
objects receive shadows. If you look back at the screenshot in the Getting
ready section, you can see that the monkey and the cube both cast a shadow
and the floor receives the shadow. To do this, you have to set the following
properties on the THREE.Mesh objects that should cast shadows:
..monkey.castShadow = true;
cubeMesh.castShadow = true;
For objects that receive shadows, you have to set the following on the
THREE.Mesh object:
floorMesh.receiveShadow = true;
3. At this point, we're ready to create THREE.SpotLight :
var spotLight = new THREE.SpotLight();
spotLight.angle = Math.PI/8; // in
radians
spotLight.exponent = 30;
spotLight.position = new
THREE.Vector3(40,60,-50);
These are the standard properties that define how THREE.SpotLight adds
light to a scene.
4. The next step is to set up the shadow-related properties:
spotLight.castShadow = true;
spotLight.shadowCameraNear = 50;
spotLight.shadowCameraFar = 200;
spotLight.shadowCameraFov = 35;