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