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.
