Mobile browser doesn't seem to understand the clicking event

[aidanikuz]

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? I have a clicking event in javascript but on the mobile browser it doesn't seem to "read" the function. The event fires after 3 seconds.

I have a 3d object that appears on a marker. there is a text which is hidden by default. the event is, when the object is clicked the text appears. However, after 3 seconds without doing anything the text appears.

If the current behavior is a bug, please provide the steps to reproduce.

<script>
    AFRAME.registerComponent('object-model', {
      init: function () {
        const castle = document.querySelector("#castle");
        const text = document.getElementById('text-box');
        castle.addEventListener('click', function (event) {
          if(text.object3D.visible == false && event.detail.cursorEl){
            text.object3D.visible = true;
          } 
        });
      }
    });
 </script>

<a-scene id="thescene" cursor="rayOrigin: mouse" embedded arjs="sourceType: webcam; trackingMethod: best;">
      <a-light type="point" color="white" position="0 5 0" intensity="3"></a-light>
      <a-assets>
        <a-asset-item id="mega" src="mega/scene.gltf"></a-asset-item>
      </a-assets>

      <a-marker preset='custom' type='pattern' url='tiger.patt'>
        <a-entity gltf-model="#mega" scale="0.05 0.05 0.05" position="0 0 0" rotation="-90 0 0" object-model id="castle"></a-entity>
        <a-entity geometry="primitive: plane;" material="opacity: 0">
          <a-text value="Clicked!" visible="false" id="text-box" position="-0.425 0.293 -0.531" rotation="-84.347 54.042 -51.893"></a-text>
        </a-entity>
      </a-marker>

      <!-- add a basic camera -->
      <!-- So object will land on marker -->
      <a-entity camera>
      </a-entity>
    </a-scene>

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

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

Samsung S9. using google chrome.

[LaurenceNairne]

Hey @aidanikuz,

The event fires after 3 seconds.

This isn't a AR.js bug, this is a feature of a-frame called "fuse". To turn this off you need to add to your cursor attribute cursor="fuse: false; rayOrigin: mouse"

https://aframe.io/docs/0.8.0/components/cursor.html#properties_fuse

[nicolocarpignoli]

Thanks @LaurenceNairne !

Further detail here: https://aframe.io/docs/0.8.0/components/cursor.html#fuse-based-cursor