Touch on ar Object in Ar.js

Question

I have a question concerning touch detection on ar objects. I use A-Frame with Ar.js

In my Project, I have a globe which can be rotated. Now I wanna add country-specific "markers", which should also be objects.

I tried:

AFRAME.registerComponent('markerhandler', {

init: function() {
    const animatedMarker = document.querySelector("#hiro");
    const aEntity = document.querySelector("#globe");

    animatedMarker.addEventListener('click', function(ev, target){
        console.log("hi")

    });

But I just recognized the click event anywhere on the display ...

I also tried using a raycaster from a-frame, but also with no detection :(

Has anyone a better idea/reference projects?

Answer 1

Using a-frame versions earlier than 1.0.0, you can just do

<a-marker cursor="rayOrigin: mouse">
     <a-box click-listener-component></a-box>
</a-marker>
<a-entity camera></a-camera>

---

but since 1.0.0 it's not working, at least with the example from the docs.

From what i've noticed, the raycaster direction is different when using a-frame 0.9.2 and 1.0.0. Weird thing is, when using vanilla a-frame (without ar.js), it seems to be working just fine. Looks like a ar.js thing.

Anyway, if you substitute the cursors direction calculation with an older version of the THREE.Vector3 unproject:

// instead of this:
applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );

// use this
let matrix = new THREE.Matrix4()
applyMatrix4( matrix.getInverse( camera.projectionMatrix ) ).applyMatrix4( camera.matrixWorld );

The cursor component is working again. You can check it out in this glitch