Three.js DoubleSided material doesn't cast shadow on both sides of planar parametric geometry

Question

See this jfiddle: http://jsfiddle.net/blwoodley/5Tr4D/1/ I have a blue spot light that shines on a rotating rotating square. This casts a shadow to the underlying ground. Except that it only casts a shadow on one side of the square. I saw this discussion: https://github.com/mrdoob/three.js/issues/3544 which indicates that face culling on planar surfaces is the cause. the recommendation is to give my square some depth, i.e. make it a cube. I can do that with this simple example, but I'm encountering the same problem with a parametric geometry that is a surface. Is there a way to get both sides to cast a shadow without having to give my geometry a depth in doesn't have or need? Here is the main function in the fiddle that replicates the problem with a plane: ``` function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000); camera.position.x = 100; camera.posi…

Accepted Answer

Yes, this is a feature.

`WebGLRenderer`, by default, culls front faces when rendering shadows. This is OK, because it is assumed that objects have depth. You can cull back faces, instead, if you want:

```
renderer.shadowMapCullFace = THREE.CullFaceBack;
```

... but culling neither is not an option.

The `material.side` property is not taken into consideration when casting shadows.

three.js r.63

Three.js DoubleSided material doesn't cast shadow on both sides of planar parametric geometry

Solution

Problem