My three.js scene is displaying a 3D model with a DirectionalLight casting shadows on it.
However, I am noticing a strange gradient stepping effect on the model, almost as if it's composed of multiple submodels each with their own slight shadow.
Check out this screenshot for reference: https://i.sstatic.net/HEm8n.png
I'm puzzled about why this is happening and how I can fix it. Any ideas?
Here are some important code snippets from my project:
Camera & Directional Light setup:
// Camera
camera = new THREE.PerspectiveCamera( 30, (window.innerWidth / window.innerHeight), 1, 10000 );
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add( camera );
// LIGHTS
var lightFront = new THREE.DirectionalLight( 0xffffff, 0.7 );
lightFront.position.x = 120;
lightFront.position.y = 120;
lightFront.position.z = 150;
lightFront.castShadow = true;
lightFront.shadow.camera.left = -6;
lightFront.shadow.camera.right = 6;
scene.add( lightFront );
The material used is a THREE.Mesh, configured with:
material.normalScale = new THREE.Vector2( 1, 1 );
material.castShadow = true;
material.receiveShadow = false;
material.shininess = 100;
For the renderer, these settings are applied:
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.soft = true;
renderer.shadowMap.bias = 0.0039;
renderer.shadowMap.darkness = 0.5;
renderer.shadowMap.width = 1024;
renderer.shadowMap.height = 1024;
I've experimented with different renderer configurations but haven't been able to resolve the issue.
This project is currently using revision 82 of three.js.