Image Tracking

Image tracking can detect and track a flat image in 3D space. This is great for building content that's augmented onto business cards, posters, magazine pages, etc.

Using the Template

Dragging the Image Tracker template into your hierarchy allows you to place 3D content that's tracked to an image. Once the Template is in placed in your hierarchy, place 3D objects as children of that template for them to be tracked from the center of the image.

Adding the Image Tracking template

Target File

Once you've dragged the image tracking template into your hierarchy, you'll have to set the 'Target' attribute to the 'target file' of the image you'd like to track.

Setting the 'Target' attribute and adding content to the Image Tracking templat

Translating content to 0.5 on the Y axis will make it sit on top of your tracking image.

Image Tracker Attributes

This file should be a .zpt file, as it contains everything the Zappar library needs to detect and track the image in 3D space. You can generate them using the ZapWorks command-line tool like this:

$ zapworks train myImage.png

Events

Events are fired from this.app. You may listen for image tracker events like this:

this.app.on('zappar:image_tracker', (ev) =&gt; {});

The callback object contains a message property which stores the event type. The following event messages are available:

this.app.on('zappar:image_tracker', (ev) =&gt; {

  switch(ev.message){
    /**
    * Fired when the target image (.zpt) is loaded.
    */
    case 'target_loaded': break;

    /**
    * Fired when a new anchor is created by the tracker.
    */
    case 'new_anchor': console.log(ev.anchor); break;

    /**
    * Fired when an anchor becomes visible in a camera frame.
    */
    case 'anchor_visible': console.log(ev.anchor); break;

    /**
    * Fired when an anchor goes from being visible in the previous camera frame,
    * to not being visible in the current frame.
    */
    case 'anchor_not_visible': console.log(ev.anchor); break;
  }

});