Instant World Tracking

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, use the zappar-instant component:

<a-entity zappar-instant="placement-mode: true;" id="my-instant-tracker">
    <!-- PLACE CONTENT TO APPEAR IN THE WORLD HERE -->
</a-entity>

With the placement-mode: true parameter set, the instant tracker will let the user choose a location for the content by pointing their camera around the room. When the user indicates that they're happy with the placement, e.g. by tapping a button on-screen, remove that parameter to fix the content in that location:

<a-entity zappar-instant="placement-mode: true;" id="my-instant-tracker">
    <!-- PLACE CONTENT TO APPEAR IN THE WORLD HERE -->
</a-entity>
<script>
    let myInstantTracker = document.getElementById("my-instant-tracker");
    document.body.addEventListener("click", () => {
        myInstantTracker.setAttribute("zappar-instant", "placement-mode: false;");
    })
</script>

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.

zapcode branded_zapcode i