PlayCanvas UI buttons are not working in WebAR mode

HI,
I am trying to animate my spawned 3D character with the click of a button placed inside a 2d screen(screen space). But once I enter the AR mode, the button stops interacting.
How can I solve this issue?? I don’t want to use HTML buttons and also I don’t want to keep them in 3D space.

There’s an known issue for this: WebXR AR screen space UI input doesn't register touches correctly · Issue #4776 · playcanvas/engine · GitHub

There’s a fix in progress that I’m going through testing with but there is a workaround that you can do in the mean time that is mentioned here: WebXR AR screen space UI input doesn't register touches correctly · Issue #4776 · playcanvas/engine · GitHub

Thanks for the reply, ill look into it immediately

I couldn’t able to figure it out, can u help me, with how to use the function that u mentioned and where to call it?

And currently, I am using the following script for ar

var XrBasic = pc.createScript('xrBasic');

// entity with button element
XrBasic.attributes.add('button', {
    type: 'entity'
});

XrBasic.attributes.add('availableAr', {
    type: 'entity'
});

XrBasic.attributes.add('availableHitTest', {
    type: 'entity'
});

XrBasic.attributes.add('moveAround', {
    type: 'entity'
});

XrBasic.attributes.add('controls', {
    type: 'entity'
});

// entity with camera component
XrBasic.attributes.add('cameraEntity', {
    type: 'entity'
});

XrBasic.prototype.initialize = function() {    
    // click button
    this.button.element.on('click', function() {
        // check support
        if (this.app.xr.isAvailable(pc.XRTYPE_AR)) {
            // start session
            this.cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);
        }
    }, this);
    
    this.app.xr.on('available:' + pc.XRTYPE_AR, function(available) {
        this.button.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_AR);
    }, this);
    
    this.app.xr.on('start', function() {
        this.button.enabled = false;
        this.moveAround.enabled = true;
        
    }, this);
    
    this.app.on('hitTestAvailable', function() {
        this.moveAround.enabled = false;
        this.controls.enabled = true && ! this.availableHitTest.enabled;
    }, this);
    
    this.app.xr.on('end', function() {
        this.button.enabled = true;
        this.controls.enabled = false;
    }, this);
    
    this.button.button.active = this.app.xr.supported && this.app.xr.isAvailable(pc.XRTYPE_AR);
    this.availableAr.enabled = ! this.app.xr.supported || ! this.app.xr.isAvailable(pc.XRTYPE_AR);
    this.availableHitTest.enabled = ! this.app.xr.supported || ! this.app.xr.hitTest || ! this.app.xr.hitTest.supported;
};

Am I supposed to call the function somewhere inside the above script??

This is not yet formally released but you can see how that workaround for the UI buttons is applied: https://playcanvas.com/project/984974/overview/webxr-ar-starter-kit

Code: https://playcanvas.com/editor/code/984974?tabs=102889976&line=191