Image Tracking

• React Three.js
• SDKs for Web Libraries
• Universal AR

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.

Target File

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:

$ 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>
  );
}

Events

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

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>