@zappar/threejs-utils

ThreeJS Utils

This library contains utility functions, created to speed up augmented reality development.

You may also be interested in:

• Zappar for Threejs (website, NPM)
• Zappar for A-Frame (website, NPM)
• Zappar for React+three.js (website, NPM)
• Zappar for Unity (website)
• Zappar for JavaScript (website, NPM), if you'd like to build content with a different 3D rendering platform
• ZapWorks Studio (website), a full 3D development environment built for AR, VR and MR

Table Of Contents

Click to expand table of contents

• ThreeJS Utils
  • Table Of Contents
  • Starting Development
    • Standalone Download
    • CDN
    • NPM Webpack Package
  • Usage
    • Billboard

Starting Development

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.

Standalone Download

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

Unzip into your web project and reference from your HTML like this:

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

CDN

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

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

NPM Webpack Package

Run the following NPM command inside your project directory:

npm install --save @zappar/threejs-utils

Then import the library into your JavaScript or TypeScript files:

import * as ZapparUtils from "@zappar/threejs-utils";

Usage

Billboard

BillboardGroup acts in the same way as THREE.Group except that each frame it rotates so that it faces the camera.

To construct, pass in three parameters:

• camera - A ZapparThree.Camera.
• anchorGroup - A ZapparThree anchor group.
• axis options - Object defining the axis around which the children will rotate in order to face the camera.

import * as ZapparUtils from "@zappar/threejs-utils";

// ...
const camera = new ZapparThree.Camera();

const tracker = new ZapparThree.InstantWorldTracker();
const trackerGroup = new ZapparThree.InstantWorldAnchorGroup(camera, tracker);

const billboardGroup = new ZapparUtils.BillboardGroup(trackerGroup, camera, {
  Y: true,
  // Y: false,
  // Z: false,
});

billboardGroup.add(cameraFacingContent);