Basic Movement in VR With A-Frame with Oculus Touch

To implement movement for a player using Oculus Touch with Thumbsticks in Aframe, you can use the following steps:

First, make sure to include the Aframe library and Oculus Touch controllers in your HTML file:

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-oculus-touch-controls@0.2.1/dist/aframe-oculus-touch-controls.min.js"></script>

In your A-Frame scene, add the Oculus Touch controls component to your player entity:

<a-entity id="player" oculus-touch-controls="hand: left"></a-entity>

To move the player forward, you can bind a function to the left thumbstick’s axismove event:

document.querySelector('#player').addEventListener('axismove', function(e) {
  if (e.detail.axis[1] > 0) {
    // Move player forward
    player.setAttribute('position', {
      x: player.getAttribute('position').x + 0.1,
      y: player.getAttribute('position').y,
      z: player.getAttribute('position').z
    });
  }
});

To move the player backward, you can bind a similar function to the right thumbstick’s axismove event:

document.querySelector('#player').addEventListener('axismove', function(e) {
  if (e.detail.axis[1] < 0) {
    // Move player backward
    player.setAttribute('position', {
      x: player.getAttribute('position').x - 0.1,
      y: player.getAttribute('position').y,
      z: player.getAttribute('position').z
    });
  }
});

To rotate the player, you can bind a function to the left thumbstick’s axismove event:

document.querySelector('#player').addEventListener('axismove', function(e) {
  if (e.detail.axis[0] > 0) {
    // Rotate player to the right
    player.setAttribute('rotation', {
      x: player.getAttribute('rotation').x,
      y: player.getAttribute('rotation').y + 1,
      z: player.getAttribute('rotation').z
    });
  } else if (e.detail.axis[0] < 0) {
    // Rotate player to the left
    player.setAttribute('rotation', {
      x: player.getAttribute('rotation').x,
      y: player.getAttribute('rotation').y - 1,
      z: player.getAttribute('rotation').z
    });
  }
});

This code will allow the player to move forward and backward using the left and right thumbsticks, and rotate using the left thumbstick. You can adjust the speed and sensitivity of the movement and rotation by changing the values in the setAttribute calls.

I hope this helps!