Three.js：在透明材质上投射阴影

Question

我正在尝试在MeshPhongMaterial上转换照明：

使可见部分对其下方的dom元素透明。我只想保留阴影。如果我使用ShadowMaterial，则会失去径向照明效果，而只能从对象中获得阴影：

我尝试将透明的png纹理作为贴图应用到MeshPhongMaterial，但显示为完全透明，没有阴影。

这是我尝试重新创建的效果（使用html5画布绘制产生）：

提前谢谢！

Answer 1

我想出了一个在技术上可行的解决方案。我创建了另一个webgl canvas和three.js场景。在新场景中，我创建了一个平面，该平面使用第一个画布的CanvasTexture作为其材质的alphaMap。然后，我不得不编写一个着色器，以反转第一张画布上的颜色。这是使用THREE.EffectComposer应用的。仍然需要一些调整，但这是结果：