Search code examples
javascriptthree.jsaframevirtual-reality

Aframe a-entity template > data-thumb transparency not working


I am using .png rounded corner image with entity tempalate as data thumbnail when I go to virtual mode... rounded corner image appearing with black square box (see screenshot for further understanding ).

<img id="subway" crossorigin="anonymous" src="images/new/subway.png">
<a-entity id="links" layout="type: line; margin: 2.5" position="-5 4.6 -4">
      <a-entity template="src: #link" data-src="#expense-subway" opacity="0.5" transparent="true" rotation="0 30 0" data-thumb="#subway" class="links"></a-entity>
</a-entity>

See attached screenshot for further understanding


Solution

  • When an image should display areas as fully opaque and others as fully transparent, but nothing in between at 1%–99% transparency, you should keep the default opacity/transparency values (opacity: 1.0; transparent: false;) on the material component. This is called "mask" or "cutout" mode. Then, set the alphaTest value as a threshold for which parts of the image are hidden. You'll want to tweak the value a bit, depending on the image, but in this case alphaTest: 0.25 looks reasonable to me.

    screenshot comparing alphaTest values