No Gamepad Support in WebXRController

Playground example:

Dear Babylon.JS-Community,

I’m currently trying to setup a simple Virtual Reality project for mobile phones with a basic VR headset and a controller. In case it matters: I’m using a Huawei Mate 10 Pro and the Destek VR Headset V5 with its bluetooth controller.

In standard mode, I’m able to control the camera with the gamepad just fine. However, as soon as I switch to WebXR, the gamepad is not reacting anymore and the WebXRController that I find does not have a gamepad. Is there anything obvious that I am missing?

Kind regards,

Adding @RaananW our Babylon XR guru as I have no clue what could go wrong here.

I also tried to do it with a PS4 controller - same result. However, I found a workaround by using the HTML5 Gampad API instead of the BabylonJS Gamepad API:

window.addEventListener('gamepadconnected', () => {
    let lastX = 0;
    let lastY = 0;
    this.scene.onBeforeRenderObservable.add(() => {
      const gamepad = navigator.getGamepads()[0] !;
      const [x, y] = gamepad.axes;
      if ((x === lastX) && (y === lastY)) {
      // Do something

Those events are also fired in WebXR mode. Is there a reason why BabylonJS stops providing “onleftstickchanged” events when WebXR mode is entered?


I can only assume that the reason this happens is because we don’t call attachControl on the WebXR camera (because it is technically not needed, WebXR has its own controller system). The Gamepad input, keyboard and mouse input, should all work the same in WebXR (as it is technically a regular FreeCamera), but the camera is not attached. Try calling attachControl on the webxr camera AFTER the xr session started and see if the events are fired.

Thanks a lot for your answer! I tried attaching the WebXR camera on the WebXRState.IN_XR event, but the events were still not firing. I’ll stick for now to the HTML5 gamepad API.