Click event works neither on PC nor on Mobile #337

gabrielefiorenza · 2021-09-17T09:04:49Z

gabrielefiorenza
Sep 17, 2021

I cannot add a click event on an a-image on my AR.js html built for mobile.

Here is my code, but it works neither on pc nor on mobile.

Can someone tell me why?

`<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>        
    AFRAME.registerComponent('clicker', {
        init: function() {
            this.el.addEventListener('click', e => {
                alert('Clicked!');
            });
        }
    });
</script>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;" cursor="fuse: false; rayOrigin: mouse">

        <a-assets>
            <img id="linkedin" src="linkedIn logo.png">
        </a-assets>

        <a-marker type="barcode" value="6">
            <a-image clicker id="element_linkedin" src="#linkedin"  rotation="280 0 0" scale="0.001 0.001 0.001" position="1.5 0 1" animation="property: scale; to: 0.7 0.7 0.7; dur: 2500; easing: linear; loop: false; startEvents: animation_linkedin"></a-image>
        </a-marker>

        <a-entity camera></a-entity>
    </a-scene>
</body>`

nickw1 · 2021-09-23T07:43:29Z

nickw1
Sep 23, 2021
Maintainer

Hi, that example I think is outdated and will not work on recent versions of A-Frame.

Have a look at the source of:

https://hikar.org/webapp/ex1.html

This one works on my devices.

Note the raycaster component on the a-scene, and its near and far properties. These define the start and end of a ray from the mouse click position into the screen: any object along this ray will receive a click event. In other words, in this example, if the object is up to 10000 units away it will be detected.

2 replies

gabrielefiorenza Sep 26, 2021
Author

Hi, thank you for your reply.

I have tried to use the code of the example you gave me by adapting it to my situation.

It seems to work but:

only with a-box not with a.-image, which is what I need
it seems that the spot for firing the click event is not right on the box but it is a little shifted on the left.

Can you tell me why?

Thank you so much!

nickw1 Sep 27, 2021
Maintainer

Hi, I have to admit I am not sure of this; I have only tested it on primitives like boxes and other geometries.

I have the feeling this issue has come up before; all I can suggest at the moment is to look at the issues and see if anything has been suggested.

Sorry I can't be more helpful!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Click event works neither on PC nor on Mobile #337

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Click event works neither on PC nor on Mobile #337

Uh oh!

gabrielefiorenza Sep 17, 2021

Replies: 1 comment · 2 replies

Uh oh!

Uh oh!

nickw1 Sep 23, 2021 Maintainer

Uh oh!

gabrielefiorenza Sep 26, 2021 Author

Uh oh!

nickw1 Sep 27, 2021 Maintainer

gabrielefiorenza
Sep 17, 2021

Replies: 1 comment 2 replies

nickw1
Sep 23, 2021
Maintainer

gabrielefiorenza Sep 26, 2021
Author

nickw1 Sep 27, 2021
Maintainer