Image Aframe-实体前面有透明度的PNG

也许这不是特定于一个框架，所以如果这是一个更一般的html问题，请道歉，但是如果您有一个透明度为PNG的图像，并将其放在另一个图像或任何不透明度小于1.0的对象的前面，PNG的透明部分会掩盖其后面的内容。有没有一种方法可以在不将PNG放在其他实体后面的情况下解决这个问题

下面是一个png在原语前的行为示例。它之所以有效，是因为基本体都处于完全不透明度状态：

您可以将材质的alphaTest设置为0.5。在A-Frame master（出厂时为0.6.0）上，您可以执行以下操作：

你的代码在哪里？网络上的透明PNG正如您所期望的那样工作；下面的任何东西都将通过透明区域显示出来。如果您在
画布中呈现一个透明的PNG，这是完全不同的，但是您没有提供任何有用的信息，因此无法提供上下文帮助。抱歉--添加了代码和示例。您的代码看起来应该可以工作，也许可以将
transparent=“true”
添加到
？（请注意，这个问题中的HTML标记被A-Frame库用于呈现WebGL上下文，因此它不是其他DOM元素之上的标准
）不起作用。查看我在底部添加的新代码笔示例——它完美地说明了这个问题。这非常有用！在PNG透明背景上效果很好，但在渐变上效果不太好。有没有办法让它也在渐变上工作？
<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>

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

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