AR.js multiple markers failure

Question

I'm using 2 custom patterns and trying to make AR.js recognize them. both of the markers are 6x6 barcodes that I've made into pattern using AR.js Marker Training, and put the downloaded pattens into the folder (as 500.patt and 600.patt). The result is both markers identified when I show it a single marker as showed in picture.

In addition, I would like to get a reaction when a marker is recognized (that's why the console prints are there), but although both markers' shapes are drawn, there are no prints in the console.

My code:

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ar.js</title>

</head>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs="patternRatio: 0.90">
    <!-- create your content here. just a box for now -->
    <!-- define a camera which will move according to the marker position -->
    <a-marker-camera type='pattern' url='500.patt'>
        <a-box position='0 0.5 0' material='opacity: 0.5; color: red;'></a-box>
        console.log(500);
    </a-marker-camera>
    <a-marker-camera type='pattern' url='600.patt'>
        <a-sphere position='0 0.5 0' material='opacity: 0.5; color: blue;'></a-sphere>
        console.log(600);
    </a-marker-camera>
  </a-scene>
</body>
</html>`

Outcome:

How do I make the pattern recognition show only one item and print the correct pattern recognized?

Thanks

I can only answer one of your two questions for now, see below. If this works for you, best edit your question to only ask for how to log something when a marker is triggered, and move the other part to a new question and then only ask for how to debug and fix the duplicate triggering with the wrong marker. (Please also accept the answer and leave a comment with a link to your new question, then I can take a look.) — janpio, Feb 08 '19 at 16:17

score 1 · Accepted Answer · answered Feb 08 '19 at 16:18

How to log something to the console when a marker is recognized:

AFRAME.registerComponent('registerevents', {
    init: function () {
        var marker = this.el;
        marker.addEventListener('markerFound', function() {
            var markerId = marker.id;
            console.log('! markerFound', markerId);
            // do additional things you want to do
        });
        marker.addEventListener('markerLost', function() {
            var markerId = marker.id;
            console.log('! markerLost', markerId);
            // do additional things you want to do
        });
    }
});

Then add the registerevents component to your marker:

<a-marker id="marker" preset='hiro' registerevents>

That should do it.

AR.js multiple markers failure

1 Answers1