Using 3D models with AR.js and A-Frame

Use glTF 2.0 , OBJ and other models in your AR Projects

AR.js is the perfect library to get started with Augmented Reality (AR) on the browser. Created by Jerome Etienne, its integration with A-Frame is what makes it extremely simple to integrate into any AR project.

He has written a great blog post on the A-Frame blog which covers everything you need to get started with ar.js.

What I’ll be showing you today is how you can use the following model formats with AR.js

  • glTF 2.0 and glTF
  • OBJ
  • COLLADA (DAE)
  • PLY
  • JSON
  • FBX

glTF, OBJ and COLLADA are already supported on A-Frame and have good documentation available on the A-Frame docs.

To include the other model formats, Don McCurdy built aframe-extras ( providing a whole lot of other A-Frame components of which model loaders is one) which allows you to include the other formats such as PLY, JSON, FBX and three.js.

What we will be using in this project is the aframe-extras.loaders in order to include formats which are currently not supported by default on A-Frame.

Creating the Base

We first include the latest A-Frame build that we will be using in our project.

<script src=”https://aframe.io/releases/0.6.1/aframe.min.js"></script>

Continue by includling AR.js which will make our a-frame project AR enabled.

<script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

We then define the body

<body style=’margin : 0px; overflow: hidden;’>
</body>

Once the body is defined, we create an a-frame scene and define that we would like to use arjs to create an AR scene.

<a-scene embedded arjs=’sourceType: webcam;’>
</a-scene>

We then add a camera to the a-scene we just created. The project which we are working on will let us use multiple markers but if you would like to use just one, use the <a-marker-camera> tag instead.

<a-entity camera></a-entity>

Finally, we add a marker to the scene so that camera displays the 3D model when the marker is in focus. I will be using the hiro preset marker in this project but if you would like to create your own, follow the instructions on the ar.js blog post.

<a-marker preset=’hiro’>
</a-marker>

If you followed the steps above you should now have something that looks like what you see below.

We shall now use this base to test out the various 3d model formats mentioned above and see how we can include them in our project. The following code should be placed between the opening and closing<a-marker> tags.

OBJ Models

Place the following code between the opening and closing<a-marker> tags to include an OBJ model in your AR scene. Read more about including OBJ files here.

<a-entity 
obj-model=”obj: url(/path/to/nameOfFile.obj); 
mtl: url(/path/to/nameOfFile.mtl)”>
</a-entity>

The same procedure can be used to download and integrate any model from Google Blocks.

COLLADA (DAE) Models

Place the following code between the opening and closing<a-marker> tags to include a COLLADA (DAE) model in your AR scene. Read more about including COLLADA files here.

<a-entity 
collada-model=”url(/path/to/nameOfFile.dae)”>
</a-entity>

glTF 2.0 and glTF Models

glTF 1.0

Place the following code between the opening and closing<a-marker> tags to include a glTF model in your AR scene. Read more about including glTF files here.

<a-entity 
gltf-model=”url(/path/to/nameOfFile.gltf)”>
</a-entity>

NOTE: glTF files usually come with a .bin file so make sure that both the files are in the same folder.

glTF 2.0

glTF 1.0 models can be included in your project directly as the latest version 0.6.1 supports it but in order to include glTF 2.0 models we will currently need to include the aframe-extras-loaders library from a-frame extras in order to make it work.

<script src=”https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

Once that’s done, we use gltf-model-next in place of gltf-model to include the glTF 2.0 file in our project.

<a-entity
gltf-model-next=”src: url(/path/to/nameOfFile.gltf);” >
</a-entity>

glTF 2.0 models support animations too. To enable animations read the documentation provided by Don McCurdy on Github.

NOTE:

  • glTF files usually come with a .bin file so make sure that both the files are in the same folder.
  • Support for glTF 1.0 files will be removed on the release of A-Frame 0.7.0 and the loader for glTF 2.0 will be added by default into A-Frame 0.7.0

PLY Models

NOTE: Requires aframe-extras-loaders

<a-entity
ply-model=”src: url(/path/to/nameOfFile.ply);” >
</a-entity>

JSON Models

NOTE: Requires aframe-extras-loaders

<a-entity
json-model=”src: url(/path/to/nameOfFile.json);” >
</a-entity>

FBX Models

NOTE: Requires aframe-extras-loaders and is currently experimental

<a-entity
fbx-model=”src: url(/path/to/nameOfFile.json);” >
</a-entity>

I’ve hosted the entire project using the tutorial above and you can clone the project and try it out. The project uses a glTF 2.0 model from sketchfab and uses the hiro preset marker which can be found in the markers folder below.

Let me know what you build and do share the article if you liked it :)

Feel free to reach out to me @akashkuttappa