Three.js drop shadow

Question

I was wondering if there's a way to project a shadow without have a "ground" plane where project it. I'd like to do that because the camera can be moved around the object and would be ugly see it pass through the ground.

I'm using Three.js latest-version with the WebGl renderer.

Answer 1

This is technically impossible, you could write a shader that renders the shadow on a transparent plane, that way you would not notice it when the "camera" goes through the plane, only when it goes through the shadow itself.

To do so you can lerp between the shadowratio and a transparent black or white in the pixel shader and then set the corresponding blending states on the rendering context.

Answer 2

Yes this is possible by applying ShadowMaterial to the plane geometry. This material can receive shadows and is completely transparent. so you just position the plane geometry at the desired location in the scene and you are good to go. check out this. https://threejs.org/docs/#api/en/materials/ShadowMaterial