ThreeJS image tracking multiple markers single instance


Hey all,

I’m looking to track only one marker at a time but for the app to be scanning for multiple makers simultaneously. The multiple marker example works well and is structured like this:
const tracker1 = new ZapparThree.ImageTrackerLoader(manager).load(targetImage1);
const tracker2 = new ZapparThree.ImageTrackerLoader(manager).load(targetImage2);

const trackerGroup1 = new ZapparThree.ImageAnchorGroup(camera, tracker1);
const trackerGroup2 = new ZapparThree.ImageAnchorGroup(camera, tracker2);

But since I don’t need multiple groups can I just add .zpt files to the tracker? Something like this (though I know its the wrong method):

let tracker = new ZapparThree.ImageTrackerLoader(manager).load(require("file-loader!./vanessa-1.zpt").default);
let trackerGroup = new ZapparThree.ImageAnchorGroup(camera, tracker);
tracker.loadTarget('./example-tracking-image.zpt').then(() => {
console.log('Additional marker loaded')

I’m sure I’ missing something. Thank you in advance for any advice!


Hi @kevinmerinsky,

Each instance of ImageTracker is responsible for a single zpt.

What you should do is construct a tracker for each of the zpts that you have, and once you get an onNewAnchor event, call tracker.destroy() on the ones which are not necessary.

There’s no need to create a tracker group for each of the trackers. You can do that once you have your first anchor :slight_smile:

Note that having a lot of trackers could slow things down… What you could do is intermittently enable/disable them.

Hope this helps!