mercoledì 20 giugno 2018

Laser control e raycaster su Aframe

Per poter interagire con gli oggetti su Aframe si puo' utilizzare il laser-control, un componente che mostra un raggio laser che viene emesso dal controller (sia questo DayDream od Oculus)  e che puo' interagire con gli oggetti della scena




Il laser-control puo' essere aggiunto con la semplice riga

      <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>

e' importante inserire la entity in un rig che contenga anche l'oggetto camera in modo che il raggio laser parta sempre come origine dalla camera. E' inoltre importante indicare quali sono gli oggetti con cui il raggio interagira' mediante il comando raycaster

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>

Nessun commento:

Posta un commento