Three.js

Our three.js library allows you to use Zappar's best-in-class AR technology with content built using the three.js 3D rendering platform.

Installation

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

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

Standalone Download

Once downloaded, unzip into your web project and reference from your HTML like this:

<script src="zappar-threejs.js"></script>

CDN

Reference the zappar.js library from your HTML like this:

<script src="https://libs.zappar.com/zappar-threejs/*/zappar-threejs.js"></script>

* Version number can be found on the Downloads and SDKs page.

NPM Webpack Package

Run the following NPM command inside your project directory:

npm install --save @zappar/zappar-threejs

Then import the library into your JavaScript or TypeScript files:

import * as ZapparThree from "@zappar/zappar-threejs";

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"
      }
      //...
    ]
  }
};

Usage

You can integrate the Zappar library with the existing requestAnimationFrame loop of your three.js project, as seen in the project example below. The rest of our UniversalAR three.js documentation goes into more detail about each of the component elements of present in the example.

// Set up three.js in the usual way
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// The Zappar library needs the WebGL context to process camera images
// Use this function to set your context
ZapparThree.glContextSet(renderer.getContext());

// Create a camera and set the scene background to the camera's backgroundTexture
let camera = new ZapparThree.Camera();
scene.background = camera.backgroundTexture;

// Request camera permissions and start the camera
ZapparThree.permissionRequestUI().then(granted => {
    if (granted) camera.start();
    else ZapparThree.permissionDeniedUI();
});

// Set up a tracker, in this case an image tracker
let imageTracker = new ZapparThree.ImageTrackerLoader().load(targetFile);
let trackerGroup = new ZapparThree.ImageAnchorGroup(camera, imageTracker);
scene.add(trackerGroup);

// Place any 3D content you'd like tracked from the image into the trackerGroup

function animate() {
    // Ask the browser to call this function again next frame
    requestAnimationFrame(animate);

    // The Zappar camera should have updateFrame called every frame
    camera.updateFrame(renderer);

    renderer.render(scene, camera);
}

// Start things off
animate();