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

回答

相關問題