Learn Three.js - Third Edition

Adding materials, lights, and shadows

Adding new materials and lights in Three.js is very simple and is implemented in pretty much the same way as we explained in the previous section. We start by adding a light source to the scene (for the complete source, look at js/03-03.js), as follows:

  var spotLight = new THREE.SpotLight(0xFFFFFF);  spotLight.position.set(-40, 40, -15);  spotLight.castShadow = true;  spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);  spotLight.shadow.camera.far = 130;  spotLight.shadow.camera.near = 40;

THREE.SpotLight illuminates our scene from its position (spotLight.position.set( -40, 60, -10 )). We tell it that we want it to cast a shadow by setting the castShadow property to true. In the code, you can see that ...