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?
-
Maybe this post would help.– Craig.LiMay 10, 2017 at 7:16
1 Answer
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.
-
This is absolutely fantastic--exactly what I needed without even writing a single line of Javascript. Thanks so much!! May 10, 2017 at 17:23