CODEWITHSUNDEEP
javascriptthree.jsshadow
bozoou
bozoou

Reputation: 83

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 which is in middle of x,y, and top of z axis. If I move source of light for only 1 point along y-axis (room is 500x300), I got this strikes of shadow on whole floor: http://bozoou.com/plocice3D/?moveLight=1 Same problem happens if I move light for 1 or 50.

All elements cast and receive shadow.

Upvotes: 5

Views: 4532

Answers (2)

yeahdixon
yeahdixon

Reputation: 6934

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

shadow.bias = 0.0001

Upvotes: 2

molham556
molham556

Reputation: 193

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

Upvotes: 4

Related Questions