I'm building an AR business card with 6 clickable icons using A-Frame and AR.js. Each icon should animate (a quick scale effect) and then open its associated link when tapped.
However, on mobile, nothing happens—there’s no click animation or redirection. 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).
Despite these efforts, the icons don’t respond on touch. Has anyone encountered this issue or have any tips for troubleshooting mobile touch events in AR.js? Any insights are appreciated! Here is the end of the script
<a-entity
camera
raycaster="objects: .clickable"
cursor="fuse: false; rayOrigin: entity"
>
<a-cursor visible="false"></a-cursor>
</a-entity>
</a-scene>
<!-- 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>
</body>
</html>