A-Frame png transparency

testing png in aframe

by grano

HTML

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
<a-scene fog="type: exponential; color: #0ff; far: 30; density: 0.08;">
        <a-entity id="target" geometry="primitive: box" scale="1 1 1" position="0 0 0" material="color: #cc0000"></a-entity>
        <a-entity
            id="camera"
            camera
            position="0 0 5"
            orbit-controls="
                autoRotate: false;
                target: #target;
                enableDamping: true;
                dampingFactor: 0.25;
                rotateSpeed:0.14;
                minDistance:0;
                maxDistance:15;"
            mouse-cursor="">
        </a-entity>


  <a-entity light="type:directional; castShadow:true;" position="2 3 3"></a-entity>

  <a-plane width="0.75" height="1.3" position="0.85 0.65 -0.2" material="transparent:false; opacity: 0.1; side: front;" shadow="cast:true; receive:true"></a-plane>
  
  <!--   front -->
  <a-plane width="0.75" height="1.3" position="0.85 0.65 -2" material="src:https://pbs.twimg.com/media/DcsDwdIU0AApTYy.png; transparent:false; alphaTest:0.7; side: front;" shadow="cast:true; receive:true"></a-plane>
  <!--   back -->
  <a-plane width="0.75" height="1.3" position="0 0.65 -2" material="src:https://pbs.twimg.com/media/DcsDwdIU0AApTYy.png; transparent:true; alphaTest:0; side: back;" shadow="cast:true; receive:true"></a-plane>
    <!--   double -->
  <a-plane width="0.75" height="1.3" position="-0.85 0.65 -2" material="src:https://pbs.twimg.com/media/DcsDwdIU0AApTYy.png; transparent:true; color:#fff; side: double;" shadow="cast:true; receive:true"></a-plane>
  
<!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow="cast:true; receive:true"></a-box> -->
<!--   <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow="cast:true; receive:true"></a-sphere>...