Instant World Tracking

• Three.js
• Tracking
• Universal AR

Instant World Tracking lets you tracking 3D content to a point chosen by the user in the room or immediate environment around them. With this tracking type you could build a 3D model viewer that lets users walk around to view the model from different angles, or an experience that places an animated character in their room.

Before setting up instant tracking, you must first add or replace any existing camera you have in your scene. Find out more here.

To track content from a point on a surface in front of the user, create a new InstantWorldTracker:

let instantWorldTracker = new ZapparThree.InstantWorldTracker();

Each InstantWorldTracker exposes a single anchor from its anchor parameter.

To choose the point in the user's environment that the anchor tracks from, use the setAnchorPoseFromCameraOffset(...) function, like this:

instantTracker.setAnchorPoseFromCameraOffset(0, 0, -5);

The parameters passed in to this function correspond to the X, Y and Z coordinates (in camera space) of the point to track. Choosing a position with X and Y coordinates of zero, and a negative Z coordinate, will select a point on a surface directly in front of the center of the screen.

To attach 3D content (e.g. three.js objects or models) to an InstantWorldTracker, the library provides InstantWorldAnchorGroup. It's a three.js Group that will follow the anchor in the supplied InstantWorldTracker in the 3D view:

let instantAnchorGroup = new ZapparThee.InstantWorldAnchorGroup(camera, instantWorldTracker);
scene.add(instantAnchorGroup);

// Add in any 3D objects you'd like to track to this point in space
instantAnchorGroup.add(myModel);

The group provides a coordinate system that has its origin at the point that's been set, with the positive Y coordinate pointing up out of the surface, and the X and Z coordinates in the plane of the surface. How far the chosen point is from the camera (i.e. how negative the Z coordinate provided to setAnchorPoseFromCameraOffset is) determines the scale of the coordinate system exposed by the anchor.

A typical application will call setAnchorPoseFromCameraOffset each frame until the user confirms their choice of placement by tapping a button, like this:

// Not shown - initialization, camera setup & permissions

let instantWorldTracker = new ZapparThree.InstantWorldTracker();
let instantWorldAnchorGroup = new ZapparThree.InstantWorldAnchorGroup(camera, instantWorldTracker);
scene.add(instantWorldAnchorGroup);

// Not shown - add content to the instantWorldAnchorGroup

let hasPlaced = false;

myConfirmButton.addEventListener("click", () => { hasPlaced = true });

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

    camera.updateFrame(renderer);

    if (!hasPlaced) instantTracker.setAnchorPoseFromCameraOffset(0, 0, -5);

    // Render the three.js scene as usual
    renderer.render(scene, camera);
}

// Start things off
animate();