Aframe - 实体前有透明度的PNG

也许这不是特定于Aframe，所以如果这是更多的一般html问题，但如果你有一个PNG透明度，并把它放在另一个图像或任何对象的不透明度小于1.0，PNG的透明部分掩盖了背后的东西。有没有办法解决这个问题，而不把PNG放在另一个实体的后面？Aframe - 实体前有透明度的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>

来源

2017-04-26 Alex Coulombe

你的代码在哪里？透明的PNG可以像你期望的那样工作;下面的任何东西都会透过透明区域显示。如果你在一个'canvas'呈现透明PNG，这是完全不同的，但因此它不可能提供上下文帮助你没有提供任何有用的信息。 –

抱歉 - 已添加代码和示例。 –

你的代码看起来应该可以工作，也许在''上加'transparent =“true”'？（注意给别人，在这个问题上的HTML标记使用的A字架库渲染WebGL的背景下，所以它不是一个标准的''其他DOM元素的顶部） –

您可以设置材料的alphaTest 0.5不透明的任何原语。在A型架主机（发货到0.6.0），你可以这样做：

<a-image material="alphaTest: 0.5">或许<a-image alpha-test="0.5"></a-image>

在A型框架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

来源

2017-04-26 22:59:55 ngokevin

很棒！非常感谢凯文。 –

这是超级有用的！在PNG透明背景上完美工作，但在渐变上不太好。有没有办法让它在渐变上工作呢？ – jshaw3

如果该宏将会在其它图像之后添加的代码为你透明的PNG我不会为其他图像添加透明度。

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

来源

2017-10-10 13:07:00

Aframe - 实体前有透明度的PNG

回答

相关问题