Threejs Weird Stripes Shadow

I am trying to make room light inside this kitchen http://bozoou.com/plocice3D/ You can notice wierd horizontal strikes of shadow on kitchen element. I have suspect in spotLight wh

Solution 1:

This problem is usualy caused by the shadow near point is too close to your object. For better understanding try to do the follow: after you create your light you can add a camera helper to show you the bounderies of the light.

var spotLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
spotLight.position.set(0, 100, 0);
sunLight.castShadow = true;

var shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
shadowCameraHelper.visible = true;

Kepp changing these two values untile you reach your goal.

spotLight.shadow.camera.near = 50;spotLight.shadow.camera.far = 150;

Keep in mind that the more you set spotLight.shadow.camera.far the more that shadow will be fuzzy and blury.

You can always check the threejs on this example threejs example

Solution 2:

You can adjust the shadow bias to somethings small and that sometimes will alleviate these issues.

shadow.bias = 0.0001