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

您可以将材质的 alphaTest 设置为 0.5。在 A-Frame master 上（运送到 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