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.

回答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

回答2:

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

shadow.bias = 0.0001

来源：https://stackoverflow.com/questions/29253464/threejs-weird-stripes-shadow

标签

javascript

three.js

Shadow