Hello I would like to run an alert when a market is detected, but i can't get any working example, the strange think is that i have this error when i put the image in front of the camera, it's mean that the detection works but the addEventListener doesn't
if you want to try this is the glitch code https://glitch.com/edit/#!/fresh-handsomely-innocent
and the marker to detect is the default one on this site
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.0.0/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent('marker-handler', {
init: function () {
var marker = this.el;
marker.addEventListener('markerFound', function (event) {
var markerId = event.target.id;
alert('Marker Found: ' + markerId);
var text = marker.querySelector('a-text');
text.setAttribute('visible', 'true');
});
}
});
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene embedded arjs>
<!-- Light -->
<a-light type="ambient" position="0 5 0" intensity="0.5"></a-light>
<a-light type="directional" position="2 4 -3" intensity="0.8"></a-light>
<!-- Model to load -->
<a-assets>
<a-asset-item id="dinosauro" src="https://cdn.glitch.global/9f3550c1-a3d9-466b-bf74-58c85d1a9ee0/tyrannosarus_rex_free_model.glb?v=1694031316403"></a-asset-item>
</a-assets>
<a-marker-camera type="pattern" url="https://cdn.glitch.global/9f3550c1-a3d9-466b-bf74-58c85d1a9ee0/pattern-marker.patt?v=1694025287942">
<a-entity marker-handler gltf-model="#dinosauro" position="0 -0.5 -4.4" scale="0.1 0.1 -0.1" rotation="0 45 0" visible="false"></a-entity>
<a-text marker-handler value="Hello, AR!" position="0 0 -3.5" color="red" align="center" visible="false"></a-text>
</a-marker-camera>
</a-scene>
</body>
</html>
Thanks in advance