A-Frame WebXR - Parte 2A - Camera, controller e teleport su Oculus Go

Continuiamo dal codice che abbiamo realizzato nella prima parte di questo tutorial.

<!doctype html>
<html>
    <head>
        <title>A-Frame WebXR Oculus</title>
        <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>      
    </head>
    <body>
      <a-scene>
      <a-sphere position="0 1 -5" radius="1" color="#FF0000" shadow></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 5 0" rotation="90 0 0" width="10" height="10" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 2.5 5" rotation="0 0 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="0 2.5 -5" rotation="0 180 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="5 2.5 0" rotation="0 -90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      <a-plane position="-5 2.5 0" rotation="0 90 0" width="10" height="5" src="INSERIRE IL CODICE COPIATO"></a-plane>
      </a-scene>
    </body>
</html>

Sotto l’ultimo <a-plane> andiamo ad aggiungere il camera rig che conterrà la camera creando l’elemento entity inserendo l’id cameraRig seguito dall’elemento entity che conterrà la camera aggiungendo l’id head e posizionandola a 1.6 m. Gli id inseriti ci serviranno più tardi quando andremo a definire la funzione del teleport.

Dopo la camera inseriamo il componente laser-controls che va ad inserire i controller del visore che utilizziamo.

<a-entity id="cameraRig">
  <a-entity id="head" camera position="0 1.6 0"></a-entity>
  <a-entity laser-controls></a-entity>
</a-entity>

Il componente laser-controls inserisce nella scena il controller in base al visore con cui si sta guardando l’esperienza. Questo permette di inserire il componente e renderlo attivo per qualsiasi headset. Ogni headset ha i propri controlli all’interno del componente.

A sinistra Oculus Go a destra Oculus Quest

Come si vede nell’immagine il controller viene visualizzato in modo diverso se visto con un Oculus Go (a sinistra) o con un Oculus Quest (a destra). Nel codice ho inserito un solo controller in quanto per questa parte del tutorial è dedicata al GO mentre per vedere la parte dedicata al Quest collegatevi a questo link.

Per attivare il teleport dovremo attivare un componente che va ad interagire con l’event listener. Il componente è input-listen. Per aggiungere il componente inseriamo il seguente codice nel head.

<script>
      AFRAME.registerComponent('input-listen', {  
        init:function () {    
          this.el.addEventListener('triggerdown', function (e){
            this.emit('teleportstart');
          });
          this.el.addEventListener('triggerup', function (e){
            this.emit('teleportend');
          });
        },
        tick: function () {
        }
     });
 </script>

AFRAME.registerComponent va a definire la funzione input-listen che richiama la funzione che verrà attivata con il triggerdown.

I riferimenti ai vari controlli li troviamo nei docs di A-Frame e si trovano nei seguenti link:
Oculus Go https://aframe.io/docs/1.0.0/components/oculus-go-controls.html
Oculus Quest https://aframe.io/docs/1.0.0/components/oculus-touch-controls.html
HTC Vive https://aframe.io/docs/1.0.0/components/vive-controls.html
Vive Focus https://aframe.io/docs/1.0.0/components/vive-focus-controls.html

Se guardate nella tabella Events dei vari controller troverete poche differenze e c’è l’elenco di tutti i bottoni a disposizione.

trackpadchanged	Trackpad changed.
trackpaddown	Trackpad pressed.
trackpadup	Trackpad released.
trackpadtouchstart	Trackpad touched.
trackpadtouchend	Trackpad not touched.
trackpadmoved	Trackpad moved.
triggerchanged	Trigger changed.
triggerdown	Trigger pressed.
triggerup	Trigger released.

Elenco degli attivatori dell’Oculus go

La funzione richiama il triggerdown ed il triggerup

 this.el.addEventListener('triggerdown', function (e){
            this.emit('teleportstart');
          });
 this.el.addEventListener('triggerup', function (e){
            this.emit('teleportend');
          });

Seguiti dagli eventi teleportstart e teleportend che andremo a definire all’interno dell’elemento che contiene il componente laser-controls.

<a-entity teleport-controls="cameraRig: #cameraRig; teleportOrigin:#head; startEvents: teleportstart; endEvents: teleportend" laser-controls input-listen> </a-entity>

Nel componente teleport-controls definiamo il cameraRig con il nome definito come id precendentemere e il teleportOrigin sarà la camera che ha l’id head. Gli eventi che attivano il teleport sono definiti nella funzione che abbiamo inserito precedentemente e indicano il punto di partenza ed il punto di arrivo.

Adesso possiamo testare il funzionamento collegandoci con il browser di Oculus nel nostro Oculus Go andando all’indirizzo del nostro progetto xxxxx.glitch.me