How to navigate using A-Frame using the Google Cardboard button?

Question

I am writing a WebVR application using A-Frame. The application is mainly intended for cardboard users. On the desktop, you can simply add a component wasd-controlsto the camera to navigate using WASD. However, I would like to be able to move in the same way, using the Cardboard button instead (that is, the Touch Screen), where the direction is determined by the orientation of the camera. Is there an easy way to do this with A-Frame?

Answer 1

As you note, it is wasd-controlsreally just designed to control the keyboard on the desktop. I wrote a comparable component universal-controlsthat can replace both look-controls, and wasd-controls. Using this component, pressing the card button will move the camera in the direction in which it is facing:

<a-entity camera universal-controls></a-entity>

Alternatively, you can define “control points”, and when the user looks at them, teleport the camera. In many cases, this may be the best user interface. Demo and source .

  <!-- Player -->
  <a-entity camera="userHeight: 1.6"
            universal-controls="movementControls: checkpoint"
            checkpoint-controls="mode: teleport">
    <a-entity cursor
              position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;"
              material="color: #CCC; shader: flat;">
    </a-entity>
  </a-entity>

  <!-- Terrain -->
  <a-grid></a-grid>

  <!-- Checkpoints -->
  <a-entity position="1 0 1">
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="0 0 -5.2" color="#39BB82"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="3 0 0" color="#39BB82"></a-cylinder>
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="-3 0 0" color="#39BB82"></a-cylinder>
  </a-entity>

Both of these options are implemented in the aframe-extras package , which adds several components to A-Frame.