Lights with materials in three.js not working properly

Question

Finally, i need a normal shadow. But using Spot / Directional lights with Lambert / Phong materials i get no proper result:

picture with examples

When i use Spot Light with Lambert Material, this material don't react to light (pic. 1, 2). When i use Spot Light with Phong Material, i get shadow, like pattern, not smooth (pic. 3, 4). When i use Directional Light with Lambert / Phong material, i get smooth, but not proper shadow (pic. 5 - 8).

I use this preferences for shadows:

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;

And this for lights:

var ambientLight =new THREE.AmbientLight( 0x555555 );
scene.add(ambientLight);

and

var spotLight = new THREE.SpotLight( 0xffffff);
spotLight.position.set( 12, 22, -25 );
spotLight.castShadow = true;
scene.add(spotLight );

and

var directionalLight=new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 12, 22, -25 );
directionalLight.castShadow = true;
scene.add(directionalLight);

Also, i use the same castShadow and receiveShadow propertyes for all of this examples.

If it needing, other code can be watched as sourcecode of this page:

Spot Light, Lambert Material

This code the same for all of my examples, excluding light - material combinations.

Now i check my examples on another machine, and found that the example with the Spot Light / Lambert Material is working the same way as a Spot Light / Phong Material. Could it depends of video card? But other problems are still the same: not smooth shadow with Spot Light and not proper shadow with Directional Light in combinations with both types of materials. new example — Алиса Фамина
It is. @2pha, thank You. It solves my recent problems, but I have a new one. All not lighted faces have no color: example. If I should create a new question, or extend this one? — Алиса Фамина

Falk Thiele Falk Thiele · Accepted Answer · 2016-06-05T08:17:44

Realtime shadows in Three.js are tricky in general. Here are some basics to follow to improve your example.

Limit the shadow.camera-frustum:

spotLight.shadow.camera.near = 25;
spotLight.shadow.camera.far = 50;
spotLight.shadow.camera.fov = 30;

Increase the shadow.mapSize:

spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;

Use shadowBias to reduce artefacts:

spotLight.shadowBias = -0.003;

The result isnt perfect because now light seams inside the room are showing up. It requires more tweaking and trade-ofs, but maybe its good enough for your needs: https://jsfiddle.net/wbrj8uak/8/

setting the camera position results in a disappearing shadow inside the room. This is sure confusing for the poster who wants to have a shadow inside, thats why i just left his code the way he supplied it.

Lights with materials in three.js not working properly

1 Answers