Three.js plane doesn't cast shadow

Question

I\'m stacking a plane and a sphere on top of a bigger plane, as seen in the following image

From WebGL inspector, it seems all three object are drawn in the

Answer 1

By default, three.js culls front faces when generating shadow maps.

renderer.shadowMap.renderReverseSided = true; // default is true

That means only back faces (from the point of view of the light) cast shadows. Culling front faces of your plane leaves nothing left to cast a shadow.

So one option is to replace your PlaneGeometry with a thin BoxGeometry, which has depth.

A second option is to set

renderer.shadowMap.renderSingleSided = false; // default is true

In this case, your plane will cast a shadow, but there may be self-shadowing artifacts since you have both plane.castShadow = true and plane.receiveShadow = true.

Typically, the first option is the best option.

three.js r.86