javascript - 如何在 Three.js 中获得仍能接收阴影的无渲染 Material ？

我正在尝试创建一种“透明” Material ，因为它不会渲染并在屏幕上留下一个空的 alpha 区域，这样您就可以看到 Canvas 后面的内容，但我也希望该 Material 能够接收阴影并且仍然渲染它们。

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

我只成功地实现了半透明效果，但没有正确地实现阴影。您在 Material 中看到的橙色实际上是渲染后面的橙色 div。渲染需要在对象后面放置一个黑色广告牌，以保持背景黑色并显示我真正想要的内容。使用我的自定义 Material 渲染平面允许渲染向目标添加 alpha，从而允许它显示 Canvas 后面的内容。我的目标是允许这样做，但在同一 Material 上有阴影，掩盖其后面的元素。

实现该效果的核心代码如下:

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 内容转换为纹理/对象)。