Last update on Saturday, January 12th 2019

Implementing Wikitude’s Instant Tracking in an Ionic application in one Go

If you are a beginner, you should have a look at the previous tutorials (here and there).

So far, tracking wise we have seen how to display information by using:

  1. The user's geolocation
  2. An image
  3. An object

But, what if we just want to display an object without using any complex mechanism?

Two words: Instant Tracking.

In this tutorial we will use Wikitude's Instant Tracking technology to display an animated model when a user touches the screen in an Ionic application.

As usual, the FBX model needs to go through the Wikitude3DEncoder app. This time we also need to grab the animation's name located on the model:

Ionic Wikitude instant tracking animation name

Once this is done we can move on to the Ionic application.

The assets folder should look like this:

Ionic Wikitude instant tracking assets folder

Now we can start writing the instant-tracking.ts file:

declare var AR;

class World {

  init() {

let world = new World();


The World is very simple for now.

We only need two properties:

  1. tracker for state manipulation
  2. instantTrackable to add a new 3D model

The init method is as follow:

  init() {
    this.tracker = new AR.InstantTracker({ deviceHeight: 1.0 });

    this.instantTrackable = new AR.InstantTrackable(this.tracker, {
      drawables: {
        cam: []
      onTrackingPlaneClick: this.addModel

The tracker is an InstantTracker instance, we pass the deviceHeight information which represents the device's distance to the ground since I'm sitting on a chair, one meter is ok.

The final step is creating an InstantTrackable by using this tracker. The property is just an empty array for now.
This array will be filled with new 3D models when the user touches the tracking plane.

The onTrackingPlaneClick callback will trigger the addModel method, which is as follow:

addModel = (x, y) => {
  this.tracker.state = AR.InstantTrackerState.TRACKING;

  var model = new AR.Model("assets/wt3/transformers.wt3", {
    scale: {
      x: 0.003,
      y: 0.003,
      z: 0.003
    rotate: {
      x: 180,
      y: 180
    translate: {
      x: x,
      y: y

  var modelAnim = new AR.ModelAnimation(model, "Animation_00");


This is where the tracker and instantTrackable properties are useful.
We start by setting the tracker's state to TRACKING, this value comes from the AR.InstantTrackerState Class.

A new model is created from the WT3 file. Since my model was quite big and not oriented in my direction, the scale has been reduced to 0.003 and it's been rotated on the x and y axis with one final translation to fit in the screen.

A new ModelAnimation is created from this model, as we have seen in the Wikitude3DEncoder, the animation was named "Animation_00".

All we need now is starting the animation and adding the model to the instantTrackable's drawables.

And voila! Ionic Wikitude instant tracking result


Wikitude's Instant Tracking is a great feature for games and demonstrations. A new AR World can be created with just one tap on the screen. All we need is mixing together a 3D Model and an InstantTracker in an InstantTrackable.

This will most likely be the last tutorial on Ionic and Wikitude for this year (unless a new SDK appears). There are many tutorials on the website explaining other AR concepts, so you can use this hiatus to get up to date.

Just like AI (which is my next focus), Augmented Reality is growing everywhere and will get a huge boost thanks to the new iPhone, Google Pixel and Google contact lenses.

Using Wikitude’s Object Tracking in an Ionic application

Learn how to use
Wikitude's Objec...

Using Wikitude's Image Recognition in an Ionic application

Learn how to use
Wikitude's Imag...

Action Range and spooky Sounds in an AR Ionic app with Wikitude

Learn how to use
Wikitude's Actio...

Stay up to date

Join over 4000 other developers who already receive my tutorials and their source code out of the oven with other free JavaScript courses and an Angular cheatsheet!
Designed by Jaqsdesign