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.
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…
What I’ll be showing you today is how you can use the following model formats with AR.js
- glTF 2.0 and glTF
- COLLADA (DAE)
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…
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.
Continue by includling AR.js which will make our a-frame project AR enabled.
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.
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.
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.
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);
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.
glTF 2.0 and glTF Models
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.
NOTE: glTF files usually come with a .bin file so make sure that both the files are in the same folder.
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.
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.
- 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
NOTE: Requires aframe-extras-loaders
<a-entityply-model=”src: url(/path/to/nameOfFile.ply);” ></a-entity>
NOTE: Requires aframe-extras-loaders
<a-entityjson-model=”src: url(/path/to/nameOfFile.json);” ></a-entity>
NOTE: Requires aframe-extras-loaders and is currently experimental
<a-entityfbx-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