After much experimentation, I am still struggling to achieve a normal shadow using Spot and Directional lights with Lambert and Phong materials:
When using Spot Light with Lambert Material, the material does not react to light properly (pic. 1, 2). With Spot Light and Phong Material, the shadow appears as an imperfect pattern rather than smooth (pic. 3, 4). Directional Light with Lambert or Phong material gives a smooth shadow but not quite the desired result (pic. 5 - 8).
I have configured my preferences for shadows as follows:
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
As for lighting, I have set up:
var ambientLight =new THREE.AmbientLight( 0x555555 );
scene.add(ambientLight);
along with:
var spotLight = new THREE.SpotLight( 0xffffff);
spotLight.position.set( 12, 22, -25 );
spotLight.castShadow = true;
scene.add(spotLight );
and also:
var directionalLight=new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 12, 22, -25 );
directionalLight.castShadow = true;
scene.add(directionalLight);
The castShadow and receiveShadow properties are consistent across all examples.
If needed, you can view the source code of this page here.
This code structure remains the same for all my examples, except for variations in light-material combinations.