<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Opacity</title> <meta name="description" content="Opacity - A-Frame"> <script src="../../../dist/aframe-master.js"></script> </head> <body> <a-scene stats> <a-assets> <img id="transparent-image" src="trefoil.png"> </a-assets> <a-entity position="0 0 4"> <a-camera></a-camera> </a-entity> <a-entity position="-3.5 1 0" rotation="0 45 0" geometry="primitive: box" material="color: red; opacity: 0.25"> <a-entity rotation="0 45 0" scale="0.5 0.5 0.5" geometry="primitive: box" material="color: red"></a-entity> </a-entity> <a-entity position="0 1 0" rotation="0 45 0" geometry="primitive: box" material="color: green"></a-entity> <a-entity position="3.5 1 0" rotation="0 45 0" geometry="primitive: box" material="color: blue; src: #transparent-image; opacity: 0.5"> <a-entity rotation="0 45 0" scale="0.5 0.5 0.5" geometry="primitive: box" material="color: blue"></a-entity> </a-entity> </a-scene> </body> </html>