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는 예상대로 작동합니다. 밑에있는 것은 투명 영역을 통해 보입니다. 캔버스에 투명한 PNG를 렌더링하는 경우에는 완전히 다릅니다. 그러나 유용한 정보를 제공하지 않았으므로 상황에 맞는 도움말을 제공하는 것은 불가능합니다. –

죄송합니다 - 코드 및 예제가 추가되었습니다. –

코드가 제대로 작동하는 것처럼 보입니다. 아마도 ''에'transparent = "true"'를 추가 하시겠습니까? (이 글의 HTML 마크 업은 A-Frame 라이브러리에서 WebGL 컨텍스트를 렌더링하는 데 사용되므로 다른 DOM 요소 위에 표준 ''이 아닙니다.) –

당신은 0.5 재료의 alphaTest을 설정할 수의 불투명도 어떤 프리미티브. A-프레임 마스터 (0.6.0에 선적)에서 당신이 할 수 있습니다 :

<a-image material="alphaTest: 0.5"> 또는 A-프레임 0.5.0에 아마 <a-image alpha-test="0.5"></a-image>

를 수동으로 수행 할 수 있습니다

<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

답변

관련 문제