Il laser-control puo' essere aggiunto con la semplice riga
<a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>
Nell'esempio viene creata una scena con un cubo ed un piano con una texture trasparente. Dopo che l'utente clicca sul cubo con in controller Daydream la texture del piano perde la trasparenza
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laser Controls</title>
<meta name="description" content="Laser Controls - A-Frame">
<script src="aframe-master.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('laser-listener', {
init: function () {
var self = this;
var el = this.el;
this.el.addEventListener('mousedown', function (evt) {
document.querySelector('#cube').setAttribute('material', 'color', '#EF2D5E');
document.querySelector('#piano').setAttribute('material','opacity',1.0);
});
this,el.addEventListener('mouseup', function (evt) {
el.setAttribute('material', 'color', self.isMouseEnter ? '#24CAFF' : initialColor);
document.querySelector('#piano').setAttribute('material','opacity',1.0);
});
}
});
</script>
<a-scene auto-enter-vr background="color: #212" antialias="true">
<a-entity id="rig" movement-controls="fly: true; speed: 30" position="300 50 140" rotation="0 45 0">
<a-entity position="50 30 410" camera look-controls wasd-controls></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>
</a-entity>
<a-assets>
<img id="grafico" src="./sposta.jpg">
<img id="trasparente" src="./trasparente.png">
</a-assets>
<a-plane id="piano" src="#grafico" material="opacity:0.0" position="270 40 -10" rotation="0 20 0" width="100" height="60" scale="" visible="" geometry=""></a-plane>
<a-entity laser-listener position="230 7 15" id="cube" geometry="primitive: box; width: 5.5; height: 5.5; depth:5.5" material="color: red"></a-entity>
</a-scene>
</body>
</html>
