如何在Three.js中获取仍然接收阴影的渲染材质？

我试图创建一个“透明”的材料，它不呈现并在屏幕上留下一个空的alpha区域，以便您可以看到画布后面的内容，但我也希望材质能够接收阴影并仍然呈现他们。如何在Three.js中获取仍然接收阴影的渲染材质？

我有一个实验JSFiddle page这个确切的目的。

我只设法获得半透明效果，但没有正确处理阴影。在材质中看到的橙色实际上是渲染背后的橙色div。渲染需要在对象背后的黑色广告牌保持背景黑色，并显示我真正想要的东西。使用我的自定义材质渲染飞机，渲染器可以向目标添加一个Alpha，以便它可以在画布后面显示事物。我的目标是允许这一点，但在相同的材料上留下阴影，掩盖背后的因素。

核心代码允许效果如下图所示：

var plane = new THREE.PlaneGeometry(10, 10, 1, 1); 
var material = new THREE.MeshPhongMaterial({ 
    color:'gray', 
    blending: THREE.NoBlending, 
    opacity: 0, 
    side: THREE.DoubleSide 
});

我也试图添加剂调合而成，但它并没有实质性的影响。

我想知道是否需要使用简单的着色器将高值更改为alpha值并保留低值。

更新： 我有什么，我要寻找一个here几乎工作版本。画龙点睛就是将阴影贴图添加到对象以获得我想要的效果。但是，我希望阴影遮挡场景背景。我打算混合CSS3D和WebGL，但宁愿如果我能保持我的阴影。（遗憾的是，我打算将CSS3D的内容转换为纹理/对象）。