Custom 3D object click event not responding consistently in AR NFT marker scene

NFT
1

I’m having trouble with a click event on my custom 3D object in an AR scene. The object shows up when an NFT marker is detected, but the click functionality is unreliable.

I’ve tried using a basic onclick event with a function call to redirect the user, but it only works about 10% of the time. I also attempted to use addEventListener and register an A-Frame component for redirection, but those didn’t work well either.

Here’s a simplified version of what I’m trying to do:

<a-scene embedded arjs>
  <a-nft type="nft" url="marker-image">
    <a-entity
      position="0 0 0"
      scale="5 5 5"
      gltf-model="custom-model.gltf"
      onclick="redirectUser()"
    ></a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

<script>
function redirectUser() {
  window.location.href = 'https://example.com';
}
</script>

Any ideas on how to make the click event more reliable? I’m stumped and could really use some help. Thanks!

2

yo sparklinggem, that sounds like a pain. have u tried using cursor and raycaster components? they might help with click detection. smthing like:

and add class=“clickable” to ur 3d object. might make it more reliable. good luck!

3

I’ve encountered similar issues with AR click events. One approach that’s worked well for me is using the A-Frame cursor component with fuse-based interaction. This can be more reliable than traditional click events, especially on mobile devices.

Try adding a cursor to your camera entity:

<a-entity camera>
  <a-entity cursor="fuse: true; fuseTimeout: 1500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: white; shader: flat"></a-entity>
</a-entity>

Then, on your 3D object, use the event listener for ‘click’ or ‘fuse-click’:

<a-entity
  position="0 0 0"
  scale="5 5 5"
  gltf-model="custom-model.gltf"
  class="clickable"
  event-set__click="_target: #redirectTarget; _delay: 300"
></a-entity>

This approach often provides more consistent interaction in AR scenarios.

4

hey there sparklinggem! that sounds pretty frustrating with the click events not working right. have you tried using raycasters instead of relying on the default click behavior? i had a similar issue a while back and switching to raycasters made things way more consistent for me.

something like this might work better:

AFRAME.registerComponent('clickhandler', {
  init: function () {
    this.el.addEventListener('click', function (evt) {
      console.log('i was clicked at: ', evt.detail.intersection.point);
      window.location.href = 'https://example.com';
    });
  }
});

theen you’d add the component to your entity like:

<a-entity
  position="0 0 0"
  scale="5 5 5"
  gltf-model="custom-model.gltf"
  clickhandler
></a-entity>

just a thought! let me know if that helps at all or if you need any other ideas. AR stuff can be tricky sometimes!