我如何从透明材料中投下阴影？

Question

我想从透明材料中投下阴影。

这里是我在https://glitch.com/edit/#!/elite-invented-television上的简单代码

正如你可以看到我的叶子的阴影是坏的(我得到了平面的阴影)，我如何改进这个渲染？

edit1一个解决方案已经找到(感谢Piotr ;)，看看“编辑”的小故障(第一个).

/edit1

edit2，我现在试着把前面的技巧应用到铬质材料上，但没有成功。这里还有另一个小故障：https://glitch.com/edit/#!/aframe-chromakey

有什么想法吗？

/edit2

Answer 1

就像Piotr在他的评论中提到的，一种方法是使用定制深度材料。

将其调整为a-frame组件将非常简单，因为您可以重用由该材料加载的纹理：

// 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;

一个简单的组件看起来很整洁，所以您可以使用我所做的仅用于测试的这一个 (来源)。它适用于.png纹理和乐天动画。

只需将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>

​