I want to handle clicks on objects on a-marker.

shigenobu-kondo commented 6 years ago

Hi.

I have a question.

I want to execute something action when I tap the object displayed on the marker in AR.js. (For example, moving to an external website) I implemented it as below and tried to handle click event of a-box, but event did not occur. If you set an event handler on a-scene, not a-box, you can handle it, but click will be detected even if you click on a place other than a-box. ※ "console.log ('box click')" was not executed.

How can I handle handling that only a-box was clicked?

<!doctype HTML>
<html>
  <head>
    <title>Hello. WebAR!</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.js"></script>
    <script src="https://unpkg.com/aframe-animation-component@4.1.2/dist/aframe-animation-component.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"> </script>
</head>

  <body style='margin : 0px; overflow: hidden;'>

    <a-scene embedded arjs="sourceType:webcam; maxDetectionRate:30; debugUiEnabled:false;">
        <a-marker preset="hiro">
            <a-entity 
                animation="property: rotation; dur: 3000; easing: linear; loop: true; from:0 0 0; to: 0 360 0;"
                >

                <a-box cursor-listener position="0 0.5 0" rotation="0 0 0" scale="0.5 0.5 0.5" color="blue"></a-sphere>
            </a-entity>
        </a-marker>

        <a-entity camera>
            <a-entity cursor="fuse: true; fuseTimeout: 500">
            </a-entity>            
        </a-entity>
    </a-scene>

    <script src="sample.js"></script>
  </body>
</html>

AFRAME.registerComponent('cursor-listener', {
    init: function () {
      this.el.addEventListener('click', function (event) {
        console.log('box click');
      });
    }
  });

For the mounting method, I referred to the following site. https://aframe.io/docs/0.8.0/components/cursor.html#intersection-data

Please mention other relevant information such as the browser version, Operating System and Device Name

Android
Windows 10 & Chrome

Thank you.

javismiles commented 6 years ago

Ive been trying to solve that for months, nobody is able to do that yet, hopefully somebody fixes that soon!

shigenobu-kondo commented 6 years ago

To. javismiles

Thank you for your early reply. I understood that it is not compatible with the current version. I also try various challenges. I will share a good idea.

javismiles commented 6 years ago

Great shigenobu-kondo , yes please share any good idea because Ive been trying to do that for months

MirkoAlo commented 6 years ago

Hi guys! There is any solution for this issues??

Thanks!

ak-uow commented 6 years ago

If anyone is interested, my solution has been to bind click events in JavaScript to my 3D entities and and a cursor attribute to the a-marker-camera: <a-marker-camera preset='custom' type='pattern' url='/other/fave-pattern-marker.patt' cursor="rayOrigin: mouse" > </a-marker-camera>

This has allowed me to pick up the correct events, with the targetEl value being that of the entity that was clicked and events not being fired when other entities are clicked. I really wanted a 'follow the nose' cursor implementation but this will suffice.

nicolocarpignoli commented 6 years ago

I collect what i learned about events on ar.js in this article. It contains a full working example for click events. Hope it helps!

https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4

jeromeetienne / AR.js

I want to handle clicks on objects on a-marker. #328