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.
Target File
Section titled “Target File”ImageTracker
s 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
Section titled “Events”The ImageTracker
component will emit the following events on the element it’s attached to:
Event | Description |
---|---|
onVisible | emitted when the image appears in the camera view |
onNotVisible | emitted when the image is no longer visible in the camera view |
onNewAnchor | emitted 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>