Three.js: Casting a Shadow onto a Webpage

Question

Is it possible in three.js to create transparent/invisible plane, which can receive shadows? My aim is to draw some object on 3d canvas without background (so I can see webpage behind the canvas element). I want the object to cast shadows on the background and I thought, if I could make an invisble plane, then webpage background is still visible. Shadows are casted on the plane and it seems like shadows are on the webpage. Right now I can make a white plane with opacity 0.5 (or similar), but this way the plane is visible. Ideally the plane should be completely invisble (except for shadows).

EDIT: I created an exampled (based on this): http://jsfiddle.net/s5YGu/2/

Here I have opacity 0.5, but you can see the plane. If I set opacity to 0, then the whole plane and the shadows disappear.

Answer 1

Yes, you can achieve the effect you want, and it looks pretty good on my machine at least. :-)

Here is a fiddle: http://jsfiddle.net/ZXdV3/25/

There are a couple of issues. First, you will have to set alpha: true in the renderer constructor args.

Second, although I assume you'd like the plane to be completely transparent, you'll have to settle for material.opacity = 0.1, or so.

Third, if you are placing a canvas over the webpage, and you want the web page to be interactive, you are going to have to suppress pointer events in the canvas (I'm not sure if IE supports this, though): container.style.pointerEvents = 'none';

three.js r.67