Currently struggling with my shadows issue. Here is a snapshot of the problem I am encountering:
https://i.sstatic.net/odnuE.png
https://i.sstatic.net/RZitM.png
The presence of those lines puzzles me, as the scene should be evenly illuminated! The shadows appear smooth and borders are satisfactory for my requirements, but these mysterious lines ruin the overall effect.
Here's how I've configured the lighting:
var dirLight = new THREE.DirectionalLight(0xfeffaf, 1);
dirLight.position.set(dimensions.middlePoint.x,
dimensions.middlePoint.y + ( dimensions.lengthY / 2),
dimensions.middlePoint.z + dimensions.lengthZ);
dirLight.target.position.set(
dimensions.middlePoint.x,
dimensions.middlePoint.y,
dimensions.minZ);
dirLight.castShadow = true;
dirLight.shadowDarkness = 0.4;
dirLight.shadowMapWidth = 1024;
dirLight.shadowMapHeight = 1024;
dirLight.shadowCameraNear = 1;
dirLight.shadowCameraFar = dimensions.lengthY * 2;
dirLight.shadowCameraLeft = - dimensions.lengthX / 2;
dirLight.shadowCameraRight = dimensions.lengthX / 2;
dirLight.shadowCameraTop = dimensions.lengthY / 2;
dirLight.shadowCameraBottom = -dimensions.lengthY / 2;
dirLight.shadowBias = 0.0000005;
scene.add(dirLight);
In addition, here is my rendering configuration:
threeRender = new THREE.WebGLRenderer({ antialias: true });
threeRender.shadowMap.enabled = true;
threeRender.shadowMap.renderReverseSided = false;
threeRender.shadowMapSoft = true;
threeRender.shadowMapType = THREE.PCFSoftShadowMap;
I would greatly appreciate any insights on resolving this issue and guidance on the correct troubleshooting path. Thank you for your assistance.