如何在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的內容轉換爲紋理/對象）。