Augmenting a 3D model on a poster using image tracking in Aframe

5 min readFeb 23, 2024

This is the third mini project in the series Demystifying Augmented Reality: A Beginner’s Guide to Creating AR Experiences with A-Frame. If you came here from that article, welcome back! If this is the first post you’re reading, consider reading Demystifying Augmented Reality: A Beginner’s Guide to Creating AR Experiences with A-Frame first for an introduction to Augmented Reality and Aframe.

Explaining Glitch UI

First go to this site : https://glitch.com/edit/#!/getting-started-with-ar-using-aframe

This is what you will see :

(You might also see an empty preview window on the left, you can close it and ignore that for now)

On the top left corner, you will see the project’s name : “getting-started-with-ar-using-aframe”

To be able to edit this project, you will have to remix it.

Remixing a project duplicates it into your account.

If after clicking the remix button, the name of the project changes, then that means you have successfully duplicated the project and can now edit it.

Below the name of the project, you will see “Assets”

This is where all the images, videos, 3D models and files needed for your website are stored

All the images and 3D objects that we will need have already been added to the assets of the project.

At the botton, there is something called “Preview”

This allows us to see the preview of our website, to check if our code is working the way we want it to.

Augmenting a 3D map on an image using image tracking

To be able to use a colourful image as marker, feature points are extracted from it and stored in a file. This file is used in our code to identify the images and augment objects on it.

To do this, we will be using the MindAR library

We will be augmenting a 3D model of the marauder’s map on an image of the marauder’s map. Both of these have been added to the assets.

First, go to the readme file in your Glitch project and copy the code under the “for image tracking” heading

<html>
  <head>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <!the following script is needed for image tracking>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
  </head>
  <body>
    <a-scene
      mindar-image="imageTargetSrc: https://cdn.glitch.global/bcb3f705-020b-4ca7-a054-059a1a44396b/targets.mind?v=1708344241933;"
      color-space="sRGB"
      renderer="colorManagement: true, physicallyCorrectLights"
      vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false"
    >
      <!the mindar-image contains link to the image tracking file>
    </a-scene>
  </body>
</html>

In the a-scene, it’s attribute “mindar-image” contains the URL to the image tracking file called targets.mind . You can find this file in the assets.

Copy its url and replace the URL in mindar-image with it.

!note: do not remove the “;” after the URL!

mindar-image="imageTargetSrc: replace with your URL;"

Then, create a a-asset, to preload your 3D model. It will have the attributes id, which is it’s name, and src, which will contain the URL of the 3D model (In our case, URL of the marauders_map.glb)

<a-assets>
  <a-asset-item id="map" 
                src = "https://cdn.glitch.me/bcb3f705-020b-4ca7-a054-059a1a44396b/marauders_map.glb?v=1708345310271"></a-asset-item>
</a-assets>

Then, add a camera

<a-camera position="0 0 0" looks-control="enabled: false"></a-camera>

We will be creating an entity, and make that the target of our mindar image. This simply means that everything that we nest into the entity will be augmented onto our image.

<a-entity mindar-image-target="targetIndex:0">
</a-entity>

Since we want to augment our 3D model onto the image, we will nest a-gltf-model inside the entity. The a-gltf-model will have the attributes src (source of the model. Since we have already preloaded our model in a-assets, we will just use # and then the name we gave it. In our case, it will be #map), scale (Since the model is very small, we will have to adjust it to match the size of the image), rotation (initially, the model is perpendicular to the y axis, while we want it parallel to the y axis so that it is visible on the image) and finally, the animation-mixer (to enable animations)

<a-entity mindar-image-target="targetIndex:0">
  <a-gltf-model
    src="#map"
    scale="30 15 25"
    rotation="90 0 0"
    animation-mixer="clip: Open"></a-gltf-model>
</a-entity>

Don’t forget to import the library needed to animate gltf models

<!the folllowing script is needed to animate gltf files>
<script src="<https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.2.0/dist/aframe-extras.min.js>"></script>

Final code :

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <!the following script is needed for image tracking>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    <!the folllowing script is needed to animate gltf files>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.2.0/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene mindar-image="imageTargetSrc: https://cdn.glitch.global/bcb3f705-020b-4ca7-a054-059a1a44396b/targets.mind?v=1708344241933;" 
             color-space="sRGB" 
             renderer="colorManagement: true, physicallyCorrectLights" 
             vr-mode-ui="enabled: false" 
             device-orientation-permission-ui="enabled: false">
      <!the mindar-image contains link to the image tracking file>
      <a-assets>
        <a-asset-item id="map" 
                      src = "https://cdn.glitch.me/bcb3f705-020b-4ca7-a054-059a1a44396b/marauders_map.glb?v=1708345310271"></a-asset-item>
      </a-assets>
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        
        <a-gltf-model src ="#map" 
                      animation-mixer="clip: Open" 
                      scale= "30 15 25" 
                      rotation="90 0 0" ></a-gltf-model>
      </a-entity>
    </a-scene>
  </body>
</html>

After the final code is in index.html, open a preview window and point the marauders map image (available in the assets) towards the camera. A 3D map will augment on the image

Final output should look like this :

To use your own images for image tracking, use this

Thankyou for reading till the end <3 Hope you had fun during this series and learned something new~

Augmenting a 3D model on a poster using image tracking in Aframe

Explaining Glitch UI

Augmenting a 3D map on an image using image tracking

Written by Rujuta J