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

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

4 min readAug 20, 2017

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.

Creating Augmented Reality with AR.js and A-Frame - A-Frame

Don't Worry It's Less Than 10 Lines of HTMLAR.js is an efficient Augmented Reality solution on the Web. It runs 100% in…

aframe.io

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.

3D Models - A-Frame

A-Frame provides components for loading glTF, OBJ, COLLADA. We recommend using glTF if possible as glTF gains adoption…

aframe.io

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.

Blocks

Explore art from a new perspective

vr.google.com

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-entitygltf-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.

donmccurdy/aframe-extras

aframe-extras - Add-ons and helpers for A-Frame VR.

github.com

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-entityply-model=”src: url(/path/to/nameOfFile.ply);” ></a-entity>

JSON Models