Skip to content

Image Tracking

Before setting up image tracking, you must first add or replace any existing camera you have in your scene. Find out more here.

To track content from a flat image in the camera view, use the ImageTracker component:

<ImageTracker targetImage={targetFile} >
{/*PLACE CONTENT TO APPEAR ON THE IMAGE HERE*/}
</ImageTracker>

The group provides a coordinate system that has its origin at the center of the image, with positive X axis to the right, the positive Y axis towards the top and the positive Z axis coming up out of the plane of the image. The scale of the coordinate system is such that a Y value of +1 corresponds to the top of the image, and a Y value of -1 corresponds to the bottom of the image. The X axis positions of the left and right edges of the target image therefore depend on the aspect ratio of the image.

ImageTrackers use a special ‘target file’ that’s been generated from the source image you’d like to track. You can generate them using the ZapWorks command-line utility like this:

Terminal window
$ zapworks train myImage.png

The resulting file can then be passed as a targetFile prop to be loaded:

export default function App() {
const targetFile = require("file-loader!./target.zpt").default;
return (
<ZapparCanvas>
<ZapparCamera userCameraMirrorMode="css" />
<ImageTracker targetImage={targetFile} >
{/*PLACE CONTENT TO APPEAR ON THE IMAGE HERE*/}
</ImageTracker>
</ZapparCanvas>
);
}

The ImageTracker component will emit the following events on the element it’s attached to:

EventDescription
onVisibleemitted when the image appears in the camera view
onNotVisibleemitted when the image is no longer visible in the camera view
onNewAnchoremitted when a a non-previously seen before anchor appears in the camera view.

Here’s an example of using these events:

<ZapparCanvas>
<ZapparCamera />
<ImageTracker
onVisible={(anchor) => console.log(`Visible ${anchor.id}`)}
onNotVisible={(anchor) => console.log(`Not visible ${anchor.id}`)}
onNewAnchor={(anchor) => console.log(`New anchor ${anchor.id}`)}
targetImage={targetFile}
>
{/*PLACE CONTENT TO APPEAR ON THE IMAGE HERE*/}
</ImageTracker>
</ZapparCanvas>