如何从透明 material 投射阴影？

Question

我正在尝试从透明 material 投射阴影。
这是我在 https://glitch.com/edit/#!/elite-invented-television
上的简单代码如您所见，我的树叶阴影很糟糕（我得到了飞机的阴影），我该如何改善此渲染？

[编辑1] 已找到解决方案（感谢 Piotr Adam ;），查看“已编辑”故障（第一个）...
[/edit1]

[编辑2] 好吧，我现在尝试在 chromakey material 上应用之前的技巧，但没有成功。这是另一个故障：https://glitch.com/edit/#!/aframe-chromakey
有什么想法吗？
[/edit2]

Answer 1

就像 Piotr Kolecki 在他的评论中提到的那样，一种方法是使用 custom depth material.

将其调整为 a-frame 组件很简单，因为您可以重新使用 material:

加载的纹理

// provided all is loaded:
const mesh = this.el.getObject3D("mesh");
var customDepthMaterial = new THREE.MeshDepthMaterial( {
  depthPacking: THREE.RGBADepthPacking,
  map: mesh.material.map
  alphaTest: 0.5
});
mesh.customDepthMaterial = this.customDepthMaterial;

一个简单的组件看起来很整洁，所以你可以使用 this one (source) 我做的只是为了测试。它适用于 .png 纹理和 lottie 动画。

您只需在飞机上添加一个 depth-material 组件即可使用它：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/depth-material/depth-material.js"></script>
<a-scene background="color: #ECECEC">
  <a-assets>
    <img id="foliage" src="https://cdn.glitch.com/9418ac7b-9d22-4434-9511-18282652475b%2Ffoliage.png?v=1620389632977">
  </a-assets>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="8" height="8" color="#7BC8A4" shadow></a-plane>
  <a-plane position="0 1 -1.5" material="src: #foliage; side: double; transparent: true" 
           shadow depth-material>
  </a-plane>
</a-scene>

如何从透明 material 投射阴影？

How can I cast shadow from a transparent material?

aframe