Teleportation

Teleportation refers to a feature within the WebXR that allows users to move around a 3D virtual environment by “teleporting” to different locations, rather than moving through the scene in real-time. This is particularly useful in virtual reality (VR) environments where smooth, fast movement is needed, or in situations where navigating the environment via traditional means (e.g., joystick or keyboard) might cause discomfort or disorientation.

In Babylon.js, the teleportation is enabled by default, and the same applies to Reactylon. However, users can customize teleportation settings by adjusting the teleportationOptions property within the xrDefaultExperienceOptions of the Scene component, or by directly utilizing the teleportation feature through the useXrExperience hook for more advanced control.

In the following example, you can use the controller (e.g. right controller of Oculus Quest 3) to teleport to a different area. The teleportation functionality is configured to work exclusively with the floor-1 (white) by adding it to the list of teleportable floor meshes. As a result, teleportation is only possible on floor-1. If you attempt to teleport to floor-2 (red), nothing will occur.

🥽

To experience the following example, an XR headset is required. Additionally, you may need to configure your environment (for instance, for Oculus Quest 3, refer to this guide for instructions on setting up your space).

const xrExperience = useXrExperience();
// ...
<>
    <ground name='floor-1' options={{ width: 10, height: 10 }} onCreate={ground => xrExperience.teleportation.addFloorMesh(ground)} />
    <ground name='floor-2' options={{ width: 7, height: 7 }} position={new Vector3(10, 0, 10)}>
        <standardMaterial name='material' diffuseColor={Color3.Red()} />                    
    </ground>
</>

Video captured with Oculus Quest 3.

Learn More

For landing zones, advanced use cases and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/webXR/WebXRSelectedFeatures/WebXTTeleportation/.

Virtual Reality Movement