Movement
Movement refers to the mechanisms that enable users to navigate through 3D spaces. This feature is crucial for creating immersive virtual experiences, allowing users to move, explore, and interact with the virtual world in an intuitive and comfortable manner.
The movement feature in Babylon.js allows users to navigate through the scene using controllers, offering a range of movement options. By leveraging the controllers, users can intuitively explore the virtual environment with greater control and immersion. In order to enable this feature you must first ensure that teleportation is not switched on.
In the following example, you can use the controller (e.g. right controller of Oculus Quest 3) to move the WebXRCamera, which has gravity and collision enabled and it has an ellipsoid to define its dimensions. While the user can pass through the green, orange, and red planes and spheres, they cannot pass through the main ground and the red box, as its are obstructed by the collision system.
const scene = useScene();
const xrExperience = useXrExperience();
useEffect(() => {
scene.gravity = new Vector3(0, -9.8, 0);
scene.collisionsEnabled = true;
const featureManager = xrExperience.baseExperience.featuresManager;
featureManager.disableFeature(WebXRFeatureName.TELEPORTATION);
featureManager.enableFeature(WebXRFeatureName.MOVEMENT, 'latest', {
xrInput: xrExperience.input,
movementOrientationFollowsViewerPose: true
});
}, []);
// ...
<>
{/*@ts-expect-error - constructor parameters missing because it is an instance created by xr default experience */}
<webXRCamera checkCollisions applyGravity ellipsoid={new Vector3(1, 1, 1)} />
<ground name='ground-1' checkCollisions options={{ width: 20, height: 20 }}>
<standardMaterial name='ground-1-mat' />
</ground>
<ground name='ground-2' positionY={0.25} options={{ width: 4, height: 4 }}>
<standardMaterial name='ground-2-mat' specularColor={Color3.Black()} diffuseColor={Color3.Green()} />
</ground>
<ground name='ground-3' positionY={0.5} options={{ width: 3, height: 3 }}>
<standardMaterial name='ground-3-mat' specularColor={Color3.Black()} diffuseColor={Color3.FromHexString('#FFAF00')} />
</ground>
<ground name='ground-4' positionY={0.75} options={{ width: 2, height: 2 }}>
<standardMaterial name='ground-4-mat' specularColor={Color3.Black()} diffuseColor={Color3.Red()} />
</ground>
<sphere name='sphere' positionY={1.25} />
<box name='box' checkCollisions position={new Vector3(5, 0.51, 5)}>
<standardMaterial name='box-mat' diffuseColor={Color3.Red() }/>
</box>
</>
Video captured with Oculus Quest 3.
Walking Locomotion
The WebXR Walking Locomotion is an experimental feature in Babylon.js that allows users to navigate virtual reality (VR) environments by walking in place. This means that instead of using traditional controllers or teleportation to move around, users can physically simulate walking while staying in one spot. The system detects their movement (such as stepping or shifting weight) and translates it into movement within the virtual world, providing a more natural and immersive way to explore VR spaces. This capability is part of Babylon.js’s efforts to enhance user experience by integrating physical movements with virtual navigation, making interactions feel more intuitive and lifelike.
In the next example, you can approach the red box by walking in place, without needing to move from your current spot.
const xrExperience = useXrExperience();
const xrRootRef = useRef<TransformNode>(null);
useEffect(() => {
xrExperience.baseExperience.featuresManager.enableFeature(WebXRFeatureName.WALKING_LOCOMOTION, "latest", { locomotionTarget: xrRootRef.current });
}, []);
// ...
<>
<transformNode name='xr-root' ref={xrRootRef}>
{/*@ts-expect-error - constructor parameters missing because it is an instance created by xr default experience */}
<webXRCamera />
</transformNode>
<ground name='ground' options={{ width: 20, height: 20 }} />
<box name='box' position={new Vector3(0, 0.5, 5)}>
<standardMaterial name='material' diffuseColor={Color3.Red()} />
</box>
</>Video captured with Oculus Quest 3.
Learn More
For advanced use cases and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/webXR/WebXRSelectedFeatures/WebXRMovement/.
