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 waylet 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 contextZapparThree.glContextSet(renderer.getContext());
// Create a camera and set the scene background to the camera's backgroundTexturelet camera = new ZapparThree.Camera();scene.background = camera.backgroundTexture;
// Request camera permissions and start the cameraZapparThree.permissionRequestUI().then(granted => { if (granted) camera.start(); else ZapparThree.permissionDeniedUI();});
// Set up a tracker, in this case an image trackerlet 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 offanimate();
Caveats
Section titled “Caveats”Texture Encoding
When changing outputEncoding
on your renderer, ensure you apply the same encoder to the background texture of the camera.
const renderer = new THREE.WebGLRenderer();renderer.outputEncoding = THREE.sRGBEncoding;
const camera = new ZapparThree.Camera();// Add the below line for consistencycamera.backgroundTexture.encoding = THREE.sRGBEncoding;scene.background = camera.backgroundTexture;
The same applies to renderTarget.texture.encoding
when using EffectComposer
.