Instant World Tracking

To track content from a point on a surface in front of the user, use the InstantTracker component:

<InstantTracker placementMode >
  {/*PLACE CONTENT TO APPEAR IN THE WORLD HERE*/}
</InstantTracker>

You can use the placementMode prop to let the user choose a location for their content by moving their camera around the room. While the prop is set, the InstantTracker's position will be updated every frame to be in front of the user at [0, 0, -5] relative to the camera. Once the prop is removed the tracker will keep the content anchored at that position in the user's environment, rather than directly in front of the camera. You can customize the camera-relative position that's set during placement mode using the placementCameraOffset prop.

In typical usage, the tracker starts with placementMode set, and an on-screen UI element enables to the user to 'place' and 'pick-up' the content by toggling that prop, like this:

const [placementMode, setPlacementMode] = useState(true);
return (
  <>
    <ZapparCanvas>
      <ZapparCamera />
       <InstantTracker placementMode={placementMode} placementCameraOffset={[0, 0, -10]}>
          <mesh>
            <sphereBufferGeometry />
            <meshStandardMaterial color="hotpink" />
          </mesh>
      </InstantTracker>
      <directionalLight position={[2.5, 8, 5]} intensity={1.5} />
    </ZapparCanvas>
    <div
      id="zappar-placement-ui"
      onClick={() => {
        setPlacementMode((currentPlacementMode) => !currentPlacementMode);
      }}
    >
      Tap here to
      {placementMode ? " place " : " pick up "}
      the object
    </div>
  </>
);

The group provides a coordinate system that has its origin at the point that's been set, with the positive Y coordinate pointing up out of the surface, and the X and Z coordinates in the plane of the surface.

zapcode branded_zapcode i