Aframe - PNG mit Transparenz vor Entity

Question

Vielleicht ist dies nicht spezifisch für Aframe also Entschuldigungen, wenn dies eher eine allgemeine HTML-Frage ist, aber wenn Sie ein PNG mit Transparenz haben und es vor einem anderen Bild oder einem anderen setzen Objekt mit einer Deckkraft von weniger als 1,0, der transparente Teil des PNG maskiert was dahinter steckt. Gibt es eine Möglichkeit, dies zu lösen, ohne die PNG hinter der anderen Einheit zu positionieren?

Hier ist ein Beispiel für ein Png-Verhalten, wie es sich vor Primitiven verhält. Es funktioniert, weil die Primitiven alle mit voller Opazität sind: 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> 

Hier ein Beispiel für mein Problem. Ein png mit Transparenz maskiert alle Bilder dahinter, unabhängig davon, ob sie Transparenz haben und alle Primitiven mit Opazität von weniger als 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

Sie können das Material des Alphatest auf 0,5 eingestellt. Auf A-Frame-Master (bis 0.6.0 Versand), könnten Sie tun:

<a-image material="alphaTest: 0.5"> oder vielleicht <a-image alpha-test="0.5"></a-image>

auf A-Frame 0.5.0, können Sie es manuell tun:

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

Pen: https://codepen.io/mozvr/pen/jmyVRG

Answer 2

Wenn Sie den Code für Ihre transparenten .png nach den anderen Bildern hinzufügen, es wil Ich füge den anderen Bildern keine Transparenz hinzu.

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