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 camera ref, as we need to pass it to the tracker.
  const camera = useRef();
  // Use Webpack to load in target file
  const targetFile = require('file-loader!./example-tracking-image.zpt').default;
  return (
      {/* Setup Zappar Camera, setting camera object's ref */}
      <ZapparCamera ref={camera} />
       {/* Setup Image Tracker, passing our target file and camera ref */}
      <ImageTracker targetImage={targetFile} camera={camera}>
      {/* Create a normal pink sphere to be tracked to the target */}
          <sphereBufferGeometry />
          <meshStandardMaterial color="hotpink" />
      {/* Normal directional light */}
      <directionalLight position={[2.5, 8, 5]} intensity={1.5} />
render(<App />, document.getElementById('root'));
zapcode branded_zapcode i