How to add Virtual Reality capabilities to your app?

We need to add an environment and create an XR Experience. This will automaticly add a button to our scene to go into VR mode.

    const env = scene.createDefaultEnvironment();

    const xr = await scene.createDefaultXRExperienceAsync({
        floorMeshes: [env.ground]
    });

Babylon.js Playgroundplayground.babylonjs.com

We can also add the WebXR directly to a loaded model without an environment.

// Async call
BABYLON.SceneLoader.Append("https://www.babylonjs.com/Scenes/Mansion/",
    "Mansion.babylon", scene, async function  () {
        var xr = await scene.createDefaultXRExperienceAsync({floorMeshes: [scene.getMeshByName("Allée")]});
    });
    

Babylon.js Playgroundplayground.babylonjs.com