18. Locomotion

Teleport controls

With controller

Although there is a component called aframe-teleport-controls, at the time of this writing, it does not seem to have been updated to support the latest versions of A-Frame. In this chapter, I am using an alternative component called aframe-blink-controls.

To use the component, we need to include the following script in the <head> of our HTML:

<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>

This component will need to translate the user's perspective (camera) and, in order to do so, we need to rig the camera inside an entity. (The component will actually move the outer entity, not the camera itself):

<!-- camera rig -->
<a-entity id="player">

    <!-- camera -->
    <a-entity id="camera" camera wasd-controls look-controls></a-entity>

</a-entity>

We then add the controlers (the teleport only works with controlers), like we did already in a previous chapter. In the following code snippet, we are using the oculus-touch-controls, which displays the 3D model of the Oculus Quest:

<!-- camera rig -->
<a-entity id="player">
    <!-- camera -->
    <a-entity id="camera" camera wasd-controls look-controls></a-entity>

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

Finally, we setup the blink-controls, telling it which entities the player will be able to jump to. In this case, we are saying that we want the player to be able to teleport using the right controller, and that the player will be able to jump to the <a-plane> entity and to any entity that has color="red".

<!-- camera rig -->
<a-entity id="player">
    <!-- camera -->
    <a-entity id="camera" camera wasd-controls look-controls></a-entity>

    <!-- hand controls -->
    <a-entity
          id="left-hand"
          oculus-touch-controls="hand: left"
    ></a-entity>
    <a-entity
          id="right-hand"
          oculus-touch-controls="hand: right"    
          blink-controls="collisionEntities: a-plane,[color='red']"
    ></a-entity>
</a-entity>

Example `2100-locomotion-teleport-01` [new tab ] [source ]

With natural hand tracking

There is also a component that does teleport with hand tracking, although it is not as flexible as the previous one. For one thing, it seems to only allow users to move on the y=0 plane.

This component also needs a camera rig, so we use it very similarly to the blink-controls. In the entity that represents the user's hand:

 <a-entity
          id="left-hand"
          hand-tracking-controls="hand: left"
          hand-tracking-extras
          hand-teleport="rig: #player;"
        ></a-entity>