On click event in AR mode A-frame

Question

I'm quite new to AR, so the answer to this question may be simple. I've written a simple component that changes the colour of a box once clicked. This component works in VR mode however it doesn't work at all in AR mode when I tap the screen on the phone.

AFRAME.registerComponent('change-color', {
        schema: {
            color: {
                type: 'string',
                default: 'blue'
            }
        },

        init: function () {
            var data = this.data;
            var el = this.el;

            el.addEventListener('click', function () {
                this.setAttribute('color', data.color);
            })
        }
    });

<a-box id="box" position="0 1.6 3" scale="0.50 0.50 0.50" color="red" change-color></a-box>

Answer 1

I would investigate use of the mouse (and touch) cursor.

Here is a link to the documentation: https://aframe.io/docs/1.0.0/components/cursor.html#properties_rayorigin

---

Here is a simple glitch project that makes use of this: https://glitch.com/~aframe-grid-select

Note line 53 of index.html:

<a-entity raycaster="objects: .collidable" cursor="rayOrigin: mouse" intersection-spawn="event: click; mixin: voxel" ></a-entity>

---

Here's another project that uses this same method: https://glitch.com/~aframe-building-ui

Note line 101 of index.html:

<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: [raycastable]"></a-entity>

Answer 2

The way the WebXR spec is defined, touch detection is disabled in immersive modes, including in AR.

To re-enable touch detection, when entering immersive mode, you need to request the dom-overlay WebXR capability.

If you don't need a visible DOM overlay, and just need touch detection, a simple way to achieve this is to use the canvas (created by your a-scene) as the overlayElement for your DOM overlay.

You can do this by setting up your a-scene like this

    <a-scene webxr="requiredFeatures: dom-overlay;
                    overlayElement: canvas;
                    referenceSpaceType: local">

(as described in the docs here)

One side-effect of this is that your canvas will be given the class a-dom-overlay which will affect the styling (adds padding + disables pointer events)

You can mitigate these side-effects by adding the following to your CSS:

canvas.a-dom-overlay:not(.a-no-style) {
  padding: 0;
  pointer-events: auto;
}

See this issue for more background/history on this topic (thanks to @Kieran F for the link).

And see a live example here (drag the shapes using touch controls).

Answer 3

I found a solution working on iPhone in Mozilla XRViewer. The main point is to create a transparent div as a clickable overlay over the scene canvas and then create a custom component to convert 2D coordinates of a touch event to 3D origin of raycasting. See https://github.com/aframevr/aframe/issues/4372#issuecomment-1721412290 for more details.