How to enable/add Oculus Controllers using await WebXRDefaultExperience.CreateAsync

Hello Dear Community!
I’m creating a 360 video player with XR support. When users access XR mode in oculus I would like to render the play/pause button in the scene and the user should be able to click it using oculus controllers.

I’m using WebXRDefaultExperience.CreateAsync and when the user clicks on the HTML button I’m triggering

await xrHelper.enterXRAsync('immersive-vr', 'local',  undefined, {});

This seems to work properly. However, oculus controllers are not rendered and there is no way to interact with play/pause button which is rendered inside.

How to enable oculus controllers?

Adding @RaananW for the XR part

Would you be able to reproduce the way you are using the default experience helper in that case?

The default experience will create an HTML button for you, that registers itself to the underlying experience helper. The controllers should work automatically if you used the default experience helper directly, otherwise you might need to create your own xrInput object to register the events.

From reading what you are saying, the missing parts of the puzzle is the HTML button and what exactly is “xrHelper” in your code. I assume it is the experience helper (and not the default experience), which doesn’t have an xrInput object. If my assumption is correct - are you using
WebXRDefaultExperience.CreateAsync or WebXRExperienceHelper.CreateAsync to create your xrHelper?

A reproduction would be great, I’ll be able to understand the code and help finding a fix.

That’s right I’m using WebXRExperienceHelper.CreateAsync and I’m missing xrInput. I’m gonna try WebXRDefaultExperience.CreateAsync.

But in case if WebXRDefaultExperience won’t do a job for me what is the best way to achieve same result with WebXRExperienceHelper.CreateAsync

You will need to create the WebXR input object yourself. It’s roughly this:

new WebXRInput(xrHelper.sessionManager,, optionalInputOptions);

The input options are these: IWebXRInputOptions | Babylon.js Documentation

1 Like

Thank you!


    const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
    const controllers = new WebXRInput(xrHelper.sessionManager,;
    const xrayPointer = new WebXRControllerPointerSelection(xrHelper.sessionManager, {
      disablePointerUpOnTouchOut: false,
      disableScenePointerVectorUpdate: false,
      forceGazeMode: false,
      xrInput: controllers,

did a job.


great! thanks for sharing the working code :slight_smile:

1 Like