WebXR icon location and collision

Just trying out webXR and had couple of issues:

How do I change WebXR camera icon location from bottom-right to top-right?

  1. I enabled WebXR Camera by clicking camera icon and noticed my collision is not working as it works with universal camera.

         var polyfill = new WebXRPolyfill();
         var createScene = function () {
             camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(100, 190, 2950), scene);
             // ALL OTHER CODES
             var vrHelper = scene.createDefaultVRExperience({
                 createDeviceOrientationCamera: false,
                 useXR: true, // This will enable XR if supported
                 floorMeshes: [ground]
             return scene;

found something for 1. ,might be related https://www.babylonjs-playground.com/#0DI1NS#3

Pinging @RaananW (please be patient as raanan is oof this week for vacations)

1 Like


I would recommend you to first use the native XR support and not use the VR experience helper with XR (as it will not be further developed).

I just noticed that the div container of the button has no css class you can manipulate. I will add one (please create a github issue if you can). If you use javascript, you can find and manipulate the parent of .babylonVRicon in the meantime.

Regarding collisions, you can see this discussion - (WebXR) How do I add collision detection to the webXR camera?