Adjusting height in WebXR

Hi there again @RaananW :sweat_smile:,

I’m now tackling the problem of how to set the height of the VR camera. I think I saw 2 ways in the documentation, but they don’t work for me.
This way doesn’t work for me, since the reference space seems to be undefined (maybe the documentation is off?):

I also tried:

xrBasicHelper.onInitialXRPoseSetObservable.add((xrCamera) => {
    // floor is at y === 2
    xrCamera.y = 2;

to no avail.

Is there a playground where this is working someone could link me? Or set it up how it’s supposed to be.

@RaananW is in vacation for 3 weeks so please bear with us during the delay :slight_smile:

In the meantime maybe @syntheticmagus would have an idea ?

Hi Regit

I have set up a sample for you here:
The state change observable is triggered when you enter XR and so only then will the camera be positioned to a y value of 5 in this case.

// XR
    const xrHelper = await scene.createDefaultXRExperienceAsync();


			if(state === BABYLON.WebXRState.IN_XR){

                scene.activeCamera.position.y = 5;


1 Like

Thanks @Michael_Prosser !!!

1 Like


I implemented your code in my project and it does set the height initially! Thanks!

I forgot to mention though, that I’m using teleport. So everytime I teleport the height resets.
Is there maybe an observable for when you press to teleport? I would need that for another use case besides teleportation as well.

Now why I want to raise the height is because my meshes are all scaled up. I’m thinking I’ll scale them down so the height question eliminates itself. This way when moving roomscale you also move more realistically around the meshes. Maybe it would be nice to have a parameter for roomscale moving distance. Or rather ‘size’ of the player.

If you are using a ground mesh, get the height of mesh at location and add your person-height to it.

This will add 2 meters to the level of ground at x = 10, z =10

var y = ground.getHeightAtCoordinates(10,10) + 2;

My ground is the same height everywhere. I still need an observable for when you teleport.

You can use this observable:

scene.activeCamera.onAfterCameraTeleport.add((targetPosition) => {

var y = ground.getHeightAtCoordinates(targetPosition.x,targetPosition.z) + 2;

activeCamera.position.y = y;


That observable is what I was looking for! Thanks for pointing me towards it.

I use it like this now:

let vrHeight = 7;
let vrCam =;
    if(state === BABYLON.WebXRState.IN_XR){
       vrCam.position.y = vrHeight;
vrCam.onAfterCameraTeleport.add((targetPosition) => {
    vrCam.position.y = vrHeight;
1 Like

Excellent! BTW there is a before onBeforeCameraTeleport observable also - can be used to determine direction between the 2 points or whatever. You may find it useful.

1 Like