image - Aframe - 实体前透明的 PNG

Question

也许这不是 Aframe 特有的，所以很抱歉，如果这更像是一个一般的 html 问题，但是如果您有一个具有透明度的 PNG 并将其放在另一个图像或不透明度小于 1.0 的任何对象的前面，则透明部分PNG 掩盖了它背后的东西。有没有办法在不将 PNG 定位在其他实体后面的情况下解决这个问题？

这是一个 png 在原语前表现出它应该如何表现的例子。它起作用是因为图元都处于完全不透明状态:
https://codepen.io/iBrews/pen/dWNymp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="pngImage" crossorigin="anonymous" 
src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
</a-assets>

<a-scene>
<a-image position = "0 1.5 -1" width="1" height="1" src="#pngImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

这是我的问题的一个例子。具有透明度的 png 会掩盖其背后的所有图像，无论它们是否具有透明度，以及任何不透明度小于 1.0 的图元
https://codepen.io/iBrews/pen/ZKLpqp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="transpImage" crossorigin="anonymous" src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
<img id="flatImage" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png">
</a-assets>

<a-scene>
<a-image position = "0 1.6 -1" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "1 1.8 -1.5" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "-.7 2 -1.5" width="1" height="1" src="#flatImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" opacity= ".5" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 1

您可以将 Material 的 alphaTest 设置为 0.5。在 A-Frame 主机上(运送到 0.6.0)，您可以执行以下操作:
<a-image material="alphaTest: 0.5"> 或者 <a-image alpha-test="0.5"></a-image>
在 A-Frame 0.5.0 上，您可以手动完成:

<script>
  AFRAME.registerComponent('alpha-test', {
    dependencies: ['material'],
    init: function () {
      this.el.getObject3D('mesh').material.alphaTest = 0.5;
    }
  });
</script>

<a-image src="#transpImage" alpha-test></a-image>
笔:https://codepen.io/mozvr/pen/jmyVRG