Hi @RaananW,
I followed your advice and tried XR and I had found several difficulties. In terms of making work an example, the documentation may not be very straightforward. So first, the const xr = scene.createDefaultXRExperienceAsync(); is not really always working and in the documentation, it is not very clear how to add the teletransportation.
I did a step by step try, so you can reproduce it at your side (I spent several hours on this so I hope is clear and you can reproduce it). I used the XR example and I mix it with the example. I took the first and add the following code:
var groundMaterial = new BABYLON.StandardMaterial(“ground”, scene);
groundMaterial.diffuseTexture = new BABYLON.Texture(‘https://i.imgur.com/NyIF3yu.png’, scene);
var createScene = async function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera(“camera1”, new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight(“light”, new BABYLON.Vector3(0, 1, 0), scene);
// Default intensity is 1. Let’s dim the light a small amount
light.intensity = 0.7;
// Our built-in ‘sphere’ shape.
var sphere = BABYLON.MeshBuilder.CreateSphere(“sphere”, {diameter: 2, segments: 32}, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
var groundMaterial = new BABYLON.StandardMaterial(“ground”, scene);
groundMaterial.diffuseTexture = new BABYLON.Texture(‘https://i.imgur.com/NyIF3yu.png’, scene);
var img = new Image();
img.onload = function() {
var heightMapSegments = this.width;
ground = BABYLON.Mesh.CreateGroundFromHeightMap(
“ground”, ‘https://i.imgur.com/Nu3WPxV.png’, 2816, 2816, heightMapSegments, 0, 100, scene, false);
ground.material = groundMaterial;
groundMaterial.freeze();
camera.position.set(0, 400, 0);
}
img.src = ‘https://i.imgur.com/Nu3WPxV.png’;
//const environment = scene.createDefaultEnvironment();
// XR
const xrHelper = await scene.createDefaultXRExperienceAsync({
floorMeshes: [ground]
});
// (re)enable:
return scene;
};
Before saving I Run, so the ground is loaded and the camera is placed in the set position.
I saved the scene example here. But it is not loading. It takes a lot of time loading at least.
Then I added the telestrasportation lines at line 49 I found in the documentation and it never worked the example, It got stuck.
xrHelper.teleportation.attach(); xrHelper.pointerSelection.attach();
let me know If you have a different result.
