Aframe - PNG avec transparence devant l'entité

Peut-être que ce n'est pas spécifique à Aframe alors excuses s'il s'agit plus d'une question html générale, mais si vous avez un PNG avec transparence et le mettre devant une autre image ou toute autre objet avec une opacité inférieure à 1.0, la partie transparente du PNG masque ce qu'il y a derrière. Existe-t-il un moyen de résoudre cela sans positionner le PNG derrière l'autre entité?Aframe - PNG avec transparence devant l'entité

Voici un exemple d'un comportement de png devant des primitives. Cela fonctionne parce que les primitives sont tous à une opacité totale: 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>

Voici un exemple de mon problème. Un .png avec des masques de transparence toutes les images derrière elle, peu importe si elles ont ou non la transparence et l'opacité des primitives avec Vous pouvez définir à 0,5 alphatest du matériau inférieur à 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>

Source

2017-04-26 Alex Coulombe

Où est votre code? Les fichiers PNG transparents sur le Web fonctionnent comme prévu. tout ce qui se trouve en dessous sera visible à travers les zones transparentes. Si vous affichez un fichier PNG transparent dans un 'canvas', c'est complètement différent - mais vous n'avez fourni aucune information utile, il est donc impossible de fournir une aide contextuelle. –

Désolé-- code et exemples ajoutés. –

Votre code a l'air de fonctionner, peut-être ajouter 'transparent =" true "' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ' (note à d'autres, le balisage HTML dans cette question est utilisé par la bibliothèque A-Frame pour rendre un contexte WebGL, donc ce n'est pas un '' par dessus d'autres éléments DOM) –

. Le A-Frame maître (expédition à 0.6.0), vous pouvez faire:

<a-image material="alphaTest: 0.5"> ou peut-être <a-image alpha-test="0.5"></a-image>

sur A-Frame 0.5.0, vous pouvez le faire manuellement:

<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

Source

2017-04-26 22:59:55 ngokevin

fonctionne très bien! merci beaucoup Kevin. –

C'était super utile! Fonctionne parfaitement sur les arrière-plans transparents PNG mais pas aussi bien sur les dégradés. Y a-t-il un moyen de l'utiliser aussi sur les dégradés? – jshaw3

Si vous ajoutez le code de votre .png transparent après les autres images qu'il wil Je n'ajoute pas de transparence aux autres images.

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

Source

2017-10-10 13:07:00

Aframe - PNG avec transparence devant l'entité

Répondre

Questions connexes