click event not at the expected spot

[nico-martin]

Describe the bug I'm using aframe-href-component and desktop it works as expected. But on mobile it doesn't. And what I found out so far is that the click event is triggered somewhere more on the right than the actual icon.

To Reproduce Steps to reproduce the behavior:

1. Go to https://ar-cards.nico.dev/
2. Launch the AR Experience with this Barcode: https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png
3. klick on one of the icons, then search the "spot" somewhere right from the icon

Expected behavior It should open on the click.

Screenshots

[nicolocarpignoli]

Can you please share the code (html and js)? If you use the 'basic' approach, the one cited on my article unfortunately click works when the target is more on the center of the screen. clicking/touching on angles is not so sensitive. this is a limitation I was not able to fix (and as far as I know, no one has done a mobile events click that works better).

[nicolocarpignoli]

if you know another approach I will be super interested in try to integrate it with mine in order to enhance it :)

[nico-martin]

Sure,

HTML:

<a-scene class="app__scene" embedded arjs='detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
    <a-assets>
        <img id="nico" src="/objects/nico.jpg"></img>
    </a-assets>
    <a-marker id="marker" emitevents="true" cursor="fuse: false; rayOrigin: mouse" type='barcode' value='20'>
        <a-entity position="-0.05 0 0" scale="1.1 1.1 1" rotation="-90 0 0">
            <a-image id="image" src="#nico" width="1" height="1.41" position="0 0 0" rotation="0 0 0"></a-image>
            <a-entity href="mailto:nico@sayhello.ch" target="_blank" obj-model="obj: url(/objects/at.obj);" material="color: #1d1d1d" scale="0.15 0.15 0.15" position="-.5 .7 .2 " rotation="90 0 0"></a-entity>
        </a-entity>
    </a-marker>
    <a-entity camera>
    </a-entity>
</a-scene>

JS:

<script>
    AFRAME.registerComponent('href', {
        schema: {
            default: ''
        },
        boundClickHandler: undefined,
        clickHandler: function hrefClickHandler() {
            var url = this.data;
            window.location.href = url;
        },
        init: function () {
            this.boundClickHandler = this.clickHandler.bind(this);
            this.el.addEventListener('click', this.boundClickHandler);
        },
        remove: function () {
            this.el.removeEventListener('click', this.boundClickHandler);
        }
    });
</script>

[nicolocarpignoli]

Although I don't think it will change a lot, try with the approach in the previous article I linked. Let me know if it works better

[droid001]

I didn't manage either to get reliable click events in 3D space. One option would be to map 3D object to the screen dimensions and place an event listener on the document object and try to figure out click hits from there.

[nico-martin]

I wonder if this is somehow related to the fact that the a-canvas has the wrong width and height. If I have a screen 850x1120, the canvas has width/height of 1693x1270. That's why I need to set overflow: hidden on the body. Is this a bug or is there a specific reason for the different sizes?

[droid001]

Might be, but the project which I had which canvas size was proportional with the screen still had problems with clicks closer to the edges. My speculation is that the raycasters deviate more towards the edges compared to the center of the screen.

[nico-martin]

Ok. But still. Is this a bug or is there a specific reason for the different sizes?

[nicolocarpignoli]

please continue about this topic here: https://github.com/jeromeetienne/AR.js/issues/249 thanks!