How to detect when a marker is found in AR.js

Question

I\'m trying to detect when a marker if found/lost in ar.js, while using a-frame.

From what I see in the source code, when the marker is found, a \'getMarker\' event

Answer 1

PR303 introduces events when a marker is found and lost

• markerFound
• markerLost

You can use them by simply adding an event listener:

anchorRef.addEventListener("markerFound", (e)=>{ // your code here}

with a simple setup like this:

<a-marker id="anchor">
  <a-entity>
</a-marker>

example here. Please note, that as of sep 18', you need to use the dev branch to use the above.

---

ORIGINAL ANWSER - in case you want to do it manually

---

Detecting if the marker is found is possible by checking if the marker is visible when needed (other event, or on tick): if(document.querySelector("a-marker").object3D.visible == true)

For example:

init: function() {
   this.marker = document.querySelector("a-marker")
   this.markerVisible = false
},
tick: function() {
   if (!this.marker) return
   if (this.marker.object3D.visible) {
      if (!this.markerVisible) {
         // marker detected
         this.markerVisible = true
      }
   } else {
      if (this.markerVisbile) {
         // lost sight of the marker
         this.markerVisible = false
      }
   }
}

---

As adrian li noted, it doesn't work with a-marker-camera, only with a-markers

Answer 2

I went with a dirty hack diving into the internals, bear in mind that what I've provided might not suffice because the event get's called every time the marker is found, sadly I couldn't find an event to hook into for markers being lost.

const arController = document.querySelector("a-scene").systems.arjs._arSession.arContext.arController;

arController.addEventListener("getMarker", (evt) => {
    const markerType = evt.data.type;
    const patternType = 0;

    //console.log("onMarkerFound!!");

    if (markerType == patternType) {
        //console.log("onMarkerFound out pattern!!");

        //Do stuff...
    }
});