Mobile AR Click Events Not Working in A-Frame/AR.js help please

Augmented Reality AR Development
1

I’m building an AR business card with 6 clickable icons using A-Frame and AR.js. Each icon is supposed to animate (a quick scale effect) and open its associated link when tapped.

However, on mobile, nothing happens—there’s no click animation or redirection. Here’s what I’ve tried:

  • Adding both click and touchend event listeners via a custom component.
  • Configuring the camera’s raycaster with rayOrigin: entity for better mobile support.
  • Disabling native touch actions with CSS (touch-action: none; on the canvas).

UPDATE: It seems the problem is that I can only click on the icons if the icon is at the center of the screen and nowhere else. I’d like to make it so that I can click on any icons regardless of them being at the center of the screen.

I’ve attached the relevant part of my code below. Any insights or troubleshooting tips for mobile touch events in AR.js would be greatly appreciated.



<!-- Custom Component to Open Links on Click/Touch -->
<script>
  AFRAME.registerComponent("open-link-on-click", {
    init: function () {
      var el = this.el;
      var tapped = false; // Prevent duplicate triggers

      // Helper function to open the URL
      function openLink() {
        var linkAttr = el.getAttribute("link");
        if (linkAttr && linkAttr.indexOf("href:") !== -1) {
          var url = linkAttr.split("href:")[1].trim();
          window.open(url, "_blank");
        }
      }

      // Listen for click events (desktop and mobile)
      el.addEventListener("click", function (evt) {
        if (!tapped) {
          tapped = true;
          openLink();
          setTimeout(function () {
            tapped = false;
          }, 300);
        }
      });

      // Listen for touchend events (mobile)
      el.addEventListener("touchend", function (evt) {
        if (!tapped) {
          tapped = true;
          openLink();
          setTimeout(function () {
            tapped = false;
          }, 300);
        }
      });
    },
  });

  // Attach the component to all elements with the "clickable" class after the scene loads
  window.addEventListener("load", function () {
    var clickableElements = document.querySelectorAll(".clickable");
    clickableElements.forEach(function (el) {
      el.setAttribute("open-link-on-click", "");
    });
  });
</script>
2

It sounds like the raycaster might not be detecting the icons properly outside of the center. You could try adjusting the raycaster’s settings or ensuring that the icons have the right clickable class.

3

Have you checked your CSS for overflow issues? Sometimes, CSS can affect how touch events are registered.

4

Make sure your icons are not obstructed by any other elements. If another element is on top, it might be blocking the touch events.

5

You might want to log the touch events to see if they are being triggered at all when you tap outside the center. It could help identify where things are going wrong.

6

Consider using an a-animation component to handle the scale effect instead of trying to manage it in the click handler. It might help with the responsiveness.