React Three.js

This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React Three Fiber.

Installation

You can use this library by downloading a standalone zip containing the necessary files or by installing from NPM for use in a webpack project.

You can find the respective download links and installation instructions here.

NPM Webpack Module

Run the following NPM command inside your project directory:

$ npm install --save @zappar/zappar-react-three-fiber

Then import the library into your JavaScript or TypeScript files:

import { ZapparCamera,  /* ... */ } from "@zappar/zappar-react-three-fiber";

The final step is to add this necessary entry to your webpack rules:

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /zcv\.wasm$/,
        type: "javascript/auto",
        loader: "file-loader"
      }
      //...
    ]
  }
};

Tracking Types

The Zappar library offers three types of tracking for you to use to build augmented reality experiences:

Image Tracking can detect and track a flat image in 3D space. This is great for building content that's augmented onto business cards, posters, magazine pages, etc.

Face Tracking detects and tracks the user's face. You can attach 3D objects to the face itself, or render a 3D mesh that's fit to (and deforms with) the face as the user moves and changes their expression. You could build face-filter experiences to allow users to try on different virtual sunglasses, for example, or to simulate face paint.

Instant World Tracking lets you tracking 3D content to a point chosen by the user in the room or immediate environment around them. With this tracking type you could build a 3D model viewer that lets users walk around to view the model from different angles, or an experience that places an animated character in their room.

Importing trackers from the package:

import { InstantTracker, ImageTracker, FaceTracker } from "@zappar/zappar-react-three-fiber";

Overview

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 (
    <ZapparCanvas>
      {/* 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 */}
        <mesh>
          <sphereBufferGeometry />
          <meshStandardMaterial color="hotpink" />
        </mesh>
      </ImageTracker>
      {/* Normal directional light */}
      <directionalLight position={[2.5, 8, 5]} intensity={1.5} />
    </ZapparCanvas>
  );
}
render(<App />, document.getElementById('root'));

You may also be interested in:

zapcode branded_zapcode i