To move the player from one location in the world to another we created teleporters. These teleporters are simple objects with an id and a target id. If you press the button in the teleporter you teleport from one teleporter to the other.

To be able to use the teleporter we require the Button component/entity.

<script src="https://unpkg.com/[email protected]/dist/aframe-aabb-collider-component.min.js"></script>
<script src="../scripts/push_button.js"></script>
<script src="../scripts/teleporter.js"></script>

To let the mouse work with the button of the teleporter we also need the cursor component on the scene

<a-scene cursor="rayOrigin:mouse">
    ...
</a-scene>

Below we define a teleporter with an id and target_id as a entity.

<a-teleporter
    teleporter_id="1" 
    target_id="2">
</a-teleporter>

Here we define a teleporter with an id and target_id using a component

<a-entity 
    teleporter="teleporter_id: 1; target_id: 2;">
</a-entity>

To teleport the pleyer we need to update the location of the camera rig, as we cant change the location of the player themself. We do this by getting the world location of both the teleporter initiating the teleport and the target teleporter. When we have the world positions we can calulate the difference. This difference is then added to the position of the rig, the player is then teleported to the new location.

To initiate the teleport we use a button. The teleporter entity has the button_listener component with the channel:teleporter_ + teleporter_id. The button that is part of the teleporter also emits events on this channel. When the teleporter receives the teleporter_pressed event from the button, it starts the teleporting sequence.

The sequence first finds the target teleporter by fetching all teleporters and then filtering on teleporter_id == target_id. Once it has found the correct target teleporter, it emits the start_animation event on both the current and target teleporter. After 4500ms it calls the teleport player function wich teleports the player, and initiates the end_animation functions by sending the player_teleported events.

The animations are fairly simple, we have an animation for lowering and raising the blue cylinder, 2 animations to change the transparency and an animation for both growing the cylinder in height and shrinking it in height.

In the first stage we grow the cylinder in height and lower it. This looks like its coming out of the top of the teleporter, once its down we remove the transparency. When its no longer transparent we can teleport the player. Once the player is teleported we start the animation to make the cylinder transparent and then shrink the cylinder and move it to the top.

To let the player to move to other web pages we created a varient of the teleporter. This teleporter takes you to a different web page instead of another teleporter.

<a-web-teleporter position="0 0 -1.5" rotation="0 -20 0" teleporter_id="1" target_link="/tardis-world/index.html" target_text="Tardis World"></a-web-teleporter>

the target_link is the link you want the teleporter to take you.
the target text is the text displayed above the button

To change the link of a teleporter we created the link changer object. This object can take a list of links and texts and with each button press it will cycle to the next one and set it as the target and text of the selected portal.

example with 1 link

<a-webtel-linkselector changer_id="2" position="0.6 1.05 2.9" teleporter_id="1"links="/world-builder/index.html" texts="World Builder"></a-webtel-linkselector>

example with 3 links:

<a-webtel-linkselector changer_id="2" position="0.6 1.05 2.9" teleporter_id="1"links="/world-builder/index.html,/tardis-world/index.html,/ai-game/index.html" texts="World Builder,Tardis World,AI Game"></a-webtel-linkselector>