Simple Augmented Reality(AR) Integration with A-FRAME

Tutorial: A Step-by-Step Guide to view a glTF model using AR.js

Published in

Level Up Coding

4 min readFeb 9, 2021

Hey guys, it’s me, Rasara again 👋 This tutorial will help you to develop a simple Augmented Reality integration to your mobile or web app using a-frame.

You can find a comprehensive guide in the A-Frame official documentation to use A-Frame, BUT I thought to share my experience and some tips which I’ve followed to do this in minimal steps. So let me walkthrough the process that let to the completion of the above expected output(Figure 1).

Find a glTF model

The first thing you need to do is find a glTF model that suits your requirement. There are several websites in which you can freely download glTF models but the challenging part is to find a better model that is working. Because in my case, I have to put a lot of effort to find such a working 3D model with .gltf extension.

The following are some websites which I can recommend you to find 3D models.

You can click one of the 3D models which can freely download and you must download the file with .gltf extension as follows.

Apply the 3D model to your project

Here I’m trying to explain the code which we need to do this with a-frame. As the basic steps, first you need to include the relevant libraries and define the body of the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- this line calls aframe -->
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>    <!-- this line calls the AR.js component to be used for aframe and finds the source of different assets like the description of 3D objects, the camera calibration-->
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head><body style='margin : 0px; overflow: hidden;'>
    <!-- include the body content here -->
</body>
</html>

If you are not familiar with the above, you can refer the previous article written by me (Tutorial: Example codes to develop simple AR functions using AR.js) to get a basic idea of this.

Now, you need to include the body content of the page to apply this 3D model. This can be breakdown into two different ways.

1. Add the model to your project path locally

First one is you can simply add the model to your project path and set the path of your model to the code as follows.

<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-marker-camera preset='hiro'>
            <a-entity gltf-model="assets/images/Mosque.gltf" scale="0.2 0.2 0.2"></a-entity>
        </a-marker-camera>
    </a-scene>
</body>

But this will make some issues of loading the model sometimes because of some local changes.

In my case, I tried out this but it doesn’t work for me. So, I went for the second option.

2. Upload the model to your Glitch Account

In my understanding, the best and the easiest way to apply a gltf model to your application is this.

Here you need to follow some steps. I will go through them one by one.

01. Create your Glitch Account and create a New Project.

Go to glitch.com official website and create an account there. Then create a New Glitch Project (Figure 3).

02. Upload the glTF model to your Glitch Project

When you have created a new project, you will see it includes a folder named “assets” under the project structure (Figure 4 -(1)). Select it and upload your glTF model there. Then it will look like this (Figure 4 -(2)).

Figure 4: Upload the model to the Glitch Project

3. Get the cdn url of the model

Click the gltf model that you uploaded and then you can see the following popup there (Figure 5). Now you can copy the cdn url of your glTF model.

4. Add the URL to your code

Now you can simply include the cdn url of the glTF model instead of adding it to your project path locally. This displays you a quick loading glTF model.

So, the final code will look like this,

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- this line calls aframe -->
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <!-- this line calls the AR.js component to be used for aframe and finds the source of different assets like the description of 3D objects, the camera calibration-->
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head><body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
    <a-marker-camera preset='hiro'>
        <a-entity position="0 0 0" scale="0.2 0.2 0.2" gltf-model="https://cdn.glitch.com/0f662680-b46a-4a86-bc3e-660c29752c5a%2FMosque.gltf?v=1611234341037"></a-entity>
    </a-marker-camera>
</a-scene>
</body>
</html>

Now you are done with the expected output as in the very first image (figure 1)….😉!

Try out this interesting tutorial and don’t forget to give your feedback.

Cheers guys…!