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>

は私の問題の例です。 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

コードはどこですか？ Web上の透過的なPNGは期待どおりに動作します。下のものは透明な領域に表示されます。透明なPNGを 'canvas'でレンダリングしている場合、これはまったく異なりますが、有用な情報を提供していないので、コンテキストヘルプを提供することは不可能です。 –

申し訳ありません - コードとサンプルが追加されました。 –

あなたのコードはうまくいくはずです。おそらく、 ''に 'transparent =" true "'を追加しますか？（他の点に注意してください。この質問のHTMLマークアップはWebGLコンテキストをレンダリングするためにAフレームライブラリによって使用されるため、他のDOM要素の上には標準の ''ではありません） –

の不透明度と透明度にかかわらず、彼らは透明性を持っているかどうかのマスクうち、その背後にあるすべての画像を、そして任意のプリミティブでPNG形式あなたは0.5に、材料のalphaTestを設定することができます。（0.6.0に出荷）フレームマスターで、あなたができる：

<a-image material="alphaTest: 0.5">または多分<a-image alpha-test="0.5"></a-image>

-フレーム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のためのコードを追加した場合、それはWIL他の画像に透明度を追加しません。

<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

答えて

関連する問題