To find your way in the tardis-world we have added a compass. This compass will appear if you press down the gripper button on the right hand controller. The arrow will then point towards the teleporter at the center of the world.

Adding the compass to your game and using it is fairly easy. You just need to add the following line of code in your Camera Rig:

    <a-compass target_id="#teleporter1"></a-compass>

your rig should then look something like this:

<a-entity id="rig">
    <a-entity id="camera" camera look-controls></a-entity>
    <a-entity class="hand" id="leftcontrl" oculus-touch-controls="hand: left" thumbstick-logging  x-button-listener></a-entity>
    <a-entity class="hand" id="rightcontrl" oculus-touch-controls="hand: right" thumbstick-logging a-button-listener></a-entity>
    <a-compass target_id="#teleporter1"></a-compass>
</a-entity>

The compass will now point towards the object named "teleporter1" in the world when the right gripper button is pressed.

The compass is made of 2 entities. An a-entity and a a-cone. We call the a-entity the compass-container and the a-cone the arrow. The compass-container is used to house the arrow, if we rotate the container the arrow will also rotate. We then set the z position of the arrow to -0.1. The arrow will then be 10 cm of the center of the container. If we now rotate the container the arrow will rotate with it like its the tip of the compass.

To calculate where the arrow needs to point we need 2 locations. The first one is the world location of the target object, and the second one is the world location of the right hand controller. We can then calculate the angle between these points using the x and z values. This angle is the angle we need to apply on the compass to have it point in the right direction

To hide and show the compass we added 2 event listeners. One listens to the gripdown event and the other listens to gripup. When gripdown is detected we set the transparency of the arrow to 1 as we want it visible. When gripup is detected we set the transparency to 0 to hide the arrow.

To set the location of the compass we get the local position of the right hand controller, and apply the same position to the compass container. We did not make the compass a sub entity of the controller, as that would create problems with the rotation.