18. Locomotion
Teleport controls
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>2100-locomotion-teleport
[new tab ]
[source ]
Click to load.Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.
:::