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, and disabling native touch actions with CSS (touch-action: none; on the canvas).
Despite these efforts, the icons don’t respond on touch. Here’s the relevant code section. Any insights or troubleshooting tips for mobile touch events in AR.js would be greatly appreciated.
Here is the code:
Business Card AR with 2x3 Clickable Icons body { margin: 0; overflow: hidden; } /\* Prevent native touch actions on the canvas \*/ canvas { touch-action: none; }<a-marker type=“pattern”
url=“https://cdn.glitch.global/xxxxxxxxxxxxxx”
smooth=“true” smoothCount=“60” smoothTolerance=“0.0003” smoothThreshold=“0.2”>
<a-entity id=“card”
geometry=“primitive: plane; width: 1; height: 0.587”
material=“opacity: 0”
rotation=“-90 0 0”>
<a-image class=“clickable”
link=“href: mailto:xxxxxxxxxxxxxxxxxxxx”
src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”
position=“-0.9 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image class=“clickable”
link=“href: data:text/vcard;charset=utf-8,BEGIN:VCARD%0AVERSION:3.0%xxxxxxxxxxxxxxxxxxxx0AEND:VCARD”
src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxxxxxxxxxxx”
position=“-0.6 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image class=“clickable”
link=“href: Share on WhatsApp”
src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”
position=“-0.3 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image class=“clickable”
link=“href: https://line.me/xxxxxxxxxxxxxxxxxxx”
src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxxxxxxx”
position=“0 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image class=“clickable”
link=“href: WeChat - Free messaging and calling app”
src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxxxxxxxxxx”
position=“0.3 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image class=“clickable”
link=“href: https://wwwxxxxxxxxxxxxxxxxxx.com”
src=“https://cdn.glitch.global/9xxxxxxxxxxxxxxxxxxxxxxxxx”
position=“0.6 -1 0”
width=“0.3” height=“0.3”
animation__click=“property: scale; startEvents: click; from: 1 1 1; to: 0.8 0.8 0.8; dur: 100; dir: alternate”>
<a-image src=“https://cdn.glitch.global/xxxxxxxxxxxxxxxxxxx”
position=“1 0 0.15”
width=“0.8” height=“0.8”>
<a-entity camera
raycaster=“objects: .clickable”
cursor=“fuse: false; rayOrigin: entity”>