Search results for ""

Usage

Usage You can integrate the Zappar library with an existing React Three Fiber app. A typical project may look like this: import { render } from 'react-dom'; import React, { useRef } from 'react'; import { ZapparCamera, ImageTracker, ZapparCanvas } from '@zappar/zappar-react-three-fiber'; export default function App() { // Setup a …...

Tracking

Tracking The Zappar React Three.js library contains a number of tracking types, each of which are great for different use cases. This section details how each of these tracking types can be set up and used, along with advanced usage techniques. Image Tracking Face Tracking Instant World Tracking You are …...

Face Tracking

Face Tracking Before setting up face tracking, you must first add or replace any existing camera you have in your scene. Find out more here. To place content on or around a user's face, create a new FaceTracker component: <ZapparCamera/> <FaceTracker > {/*PLACE CONTENT TO APPEAR ON THE FACE HERE*/} …...

Image Tracking

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 …...

Instant World Tracking

Instant World Tracking Before setting up instant world tracking, you must first add or replace any existing camera you have in your scene. Find out more here. To track content from a point on a surface in front of the user, use the InstantTracker component: <InstantTracker placementMode > {/*PLACE CONTENT …...

zapcode branded_zapcode i