WebXR Demos and Examples
Basic scene
This is a step-by-step guide on how to add XR features to a basic scene
Basic Scene with XR Support
Here we just add an environment, a sphere, and XR support
const xrHelper = await scene.createDefaultXRExperienceAsync();
Adding teleportation
To get teleportation enabled, we want to provide the experience helper with an array of floor meshes:
const xrHelper = await scene.createDefaultXRExperienceAsync({// define floor meshesfloorMeshes: [environment.ground]});
Adding a color picker to the basic scene
Add a color picker (from our GUI library) and use it to change the sphere's color.
Notice that no changes were made in the XR code, and that the scene works perfectly well outside VR as well.
// GUIvar plane = BABYLON.Mesh.CreatePlane("plane", 1);plane.position = new BABYLON.Vector3(1.4, 1.5, 0.4)var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);var panel = new BABYLON.GUI.StackPanel();advancedTexture.addControl(panel);var header = new BABYLON.GUI.TextBlock();header.text = "Color GUI";header.height = "100px";header.color = "white";header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;header.fontSize = "120"panel.addControl(header);var picker = new BABYLON.GUI.ColorPicker();picker.value = sphere.material.diffuseColor;picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;picker.height = "350px";picker.width = "350px";picker.onValueChangedObservable.add(function(value) {sphere.material.diffuseColor.copyFrom(value);});panel.addControl(picker);