Shadow Map Appearing On Wrong Place

I'm trying to make use of the built-in shadow map plugin in three.js. After initial difficulties I have more or less acceptable image with one last glitch. That one being shadow ap

Solution 1:

Your code looks fine. You just need to play with the shadowLight.shadowBias parameter. This is always a bit tricky. (Note that the bias parameter can be negative.)

EDIT: Tighten up your shadow-camera near and far planes. This will help reduce both shadow acne and peter-panning. For example, your live link, set shadowLight.shadowCameraNear = 3*dmax;. This worked for me.

You can also try adding depth to your table tops, if it's not already there.

You can try setting renderer.shadowMapCullFrontFaces = false. This will cull back faces instead of front ones.