How to move around with A-Frame using Google Cardboard's button?

问题

I am writing a WebVR application using A-Frame. The app is mostly tailored to Cardboard users. On the desktop, you can simply add the wasd-controls component to the camera in order to move around using WASD. However, I would like to be able to move the same way, only using the Cardboard button (i.e. a screen touch) instead, where the direction is determined by the camera's orientation. Is there a straightforward way of doing this with A-Frame?

回答1:

As you point out, wasd-controls is really just designed for desktop keyboard controls. I've written up a comparable universal-controls component, which can optionally replace both look-controls and wasd-controls. With this component, pressing the cardboard button will move the camera in the direction it is facing:

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

Alternatively, you can define "checkpoints" and when the user gazes at them, teleport the camera. This may be a better user experience in many cases. 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.

来源：https://stackoverflow.com/questions/43882464/how-to-move-around-with-a-frame-using-google-cardboards-button

标签

web

aframe