Augmenting a 3D model of a bird using superimposed Augmented Reality in Aframe

5 min readFeb 23, 2024

This is the second 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.

Superimposing a bird using marker less AR

Augmented Reality needs anchors to augment objects on. When these anchors are not provided, the device finds its own markers as it moves through space. Usually, it uses the camera (a-camera) as an anchor.

Today, we will be using this 3D object from Sketchfab to augment into thin air

First, copy the Aframe structure again from the readme file and paste it into index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!Import aframe>
    <script src="<https://aframe.io/releases/1.0.0/aframe.min.js>"></script>
    <!import ar.js>
    <script src="<https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js>"></script>
  </head>
  <body>
    <a-scene
      embedded
      arjs="sourceType: webcam ; videoTexture: true; debugUIEnabled: false;"
      ar-mode-ui="enabled: false"
      vr-mode-ui="enabled: false"
    >
    </a-scene>
  </body>
</html>

(clicking the “prettier” button will format the code for you)

Since we are using an animated 3D object, we will also need to import a library called aframe-extras that lets us animate 3D objects in aframe

The code for this is in the readme file, under the “for superimposed” heading.

<!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>

Now, in the scene, we will use a-gltf-model to augment the 3D model.

We will be using a-gltf-model’s “src”, “animation-mixer” and “position” attributes

Src contains the URL of the 3D model. You can get this by going to assets in the Glitch project and clicking on “phoenix_bird.glb”. Here, click on “Copy URL”

Animation-mixer contains the name of the animation we want to use. For this bird, the animation we are going to use is called “Take 001”

You can see a model’s animation names by going back to the link where you got the model from (in our case, here) Near the play/pause button, there will be the option to choose an animation from the ones available (In our case, we have the choices “Static Pose” and “Take 001”)

The 3rd attribute we will use is the position attribute, who’s default value is “0 0 0”

<a-gltf-model src="<https://cdn.glitch.global/efc295ee-a4d8-474c-8b0c-8360de80bd33/phoenix_bird.glb?v=1673638529468>"
              animation-mixer="clip: Take 001"
              position="0 0 0"
></a-gltf-model>

Replace the value of src with the URL you got when you clicked “copy url”

When you run this code and open the preview window, you will notice that there is a big bird above you. To view it in front of you, you will have to customise the model’s position values. To bring it in front of you, change the value of z axis to a negative value. To bring it down, negative y axis value and to bring it to the right, positive x axis value.

<a-gltf-model src="replace with your URL"
              animation-mixer="clip: Take 001"
              position="100 -100 -1000"
></a-gltf-model>

Finally, add a camera.

<a-camera  rotation-reader> </a-camera>

Final code :

<!DOCTYPE html>
 <html>
    <head>
    <script src="<https://aframe.io/releases/1.3.0/aframe.min.js>"></script>
    <script src="<https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.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
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;">
    <a-gltf-model src="replace with your URL"
                  animation-mixer="clip: Take 001"
                  position="100 -100 -1000"
                  ></a-gltf-model>
    <a-camera  rotation-reader> </a-camera>
    </a-scene>
  </body>
</html>

Final output will look like this:

Thankyou for reading till the end <3 Check out the third mini project in this series : Augmenting a 3D model on a poster using image tracking in Aframe.

Augmenting a 3D model of a bird using superimposed Augmented Reality in Aframe

Explaining Glitch UI

Superimposing a bird using marker less AR

Written by Rujuta J