Event handling example without using AFrame

[amaau]

Hey Amazing work, many thanks!

I'm trying to use mind-ar just for recognizing an image to trigger something, without any 3D. I'm following the three.js example as it's the most minimal one, but it's unclear to me where to listen to targetFound / targetLost events. Is it possible to do without AFrame?

[hiukim]

Yes. It's possible to do that. I didn't have time to add those examples yet. Will try to add more examples on three.js later.

[amaau]

Cool, thank you

[Sov3rain]

From the documentation example with Three.js, add the listener directly from the anchor object with the build in method anchor.onTargetFound and anchor.onTargetLost:

    <script type="module">
      const THREE = window.MINDAR.IMAGE.THREE;
      const mindarThree = new window.MINDAR.IMAGE.MindARThree({
        container: document.querySelector("#container"),
        imageTargetSrc: "https://cdn.jsdelivr.net/npm/mind-ar@1.1.0/examples/image-tracking/assets/card-example/card.mind"
      });
      const {renderer, scene, camera} = mindarThree;

      const anchor = mindarThree.addAnchor(0);

      anchor.onTargetFound = () => {
        console.log('target found!);
      );

      anchor.onTargetLost = () => {
        console.log('target lost!);
      );

      anchor.group.add(plane);
     ...
    </script>