AR.js Image Click Event Not Working? Here's the Fix!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AR.js Image Click Example - Fixed!</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false"
embedded
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<a-marker preset="hiro">
<a-image
src="btn.png"
emitevents="true"
cursor="rayOrigin: mouse"
position="0 0 0"
scale="0.5 0.5 0.5"
clicker
></a-image>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<pre><code><script>
AFRAME.registerComponent('clicker', {
init: function () {
this.el.addEventListener('click', (e) => {
alert('Image clicked!');
});
},
});
</script>
</code></pre>
</body>
</html>
<p>The issue might be related to the event listener not being properly attached to the <code><a-image></code> element. Here's an updated version of the code that should fix the problem:</p>
<p>By directly adding the <code>clicker</code> component to the <code><a-image></code> element, the event listener is correctly attached, enabling the click functionality. This solution ensures that the <code>click</code> event is properly handled and the alert message is displayed when the image is clicked in your AR scene.</p>
原文地址: https://www.cveoy.top/t/topic/o9Gc 著作权归作者所有。请勿转载和采集!