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

Question

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

为此，我有一个实验性的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 拥有的内容不会轻易转换为纹理/对象）。

Answer 1

我想你应该可以使用opacity: 0和transparent: true来实现打孔效果。