ThreeJS

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

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.

To use the library, you'll need to have Node.js version 10 or later installed.

Installation

Standalone Download

Download the bundle from this link: https://libs.zappar.com/zappar-threejs/0.2.11/zappar-threejs.zip

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/0.2.11/zappar-threejs.js"></script>

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 ThreeJS project, as seen in the project example below. The rest of our UniversalAR ThreeJS documentation goes into more detail about each of the component elements of present in the example.

// Set up ThreeJS 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();

You may also be interested in:

zapcode branded_zapcode i