@zappar/threejs-utils
v1.0.3
Published
Library containing utility functions for working with THREE.js & Universal AR
Downloads
3
Readme
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
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
- AZapparThree.Camera
.anchorGroup
- AZapparThree
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);