Why is the shadow in the wrong place? (Three.js)

Question

I have a green plane and a red cube above it. Light is directional light.

Why is the shadow in the wrong place? Code: http://jsfiddle.net/pD8dn/

---

Edit:

If I change light.shadowBias , the shadow on the plane is correct, but the shadow on the cube is incorrect:

http://jsfiddle.net/pD8dn/4/

Thanks in advance,

Answer 1

This is one of the most common shadow map artifacts called Peter Panning.

The workaround is to add a small offset to test the depth:

 light.shadowBias = 0.001; 

The exact amount of displacement must be adjusted for each scene (and, unfortunately, sometimes you can’t get rid of all artifacts everywhere, setting up shadow maps is more art than science).

This is what works for your example:

http://jsfiddle.net/pD8dn/2/