Nothing’s out of reach: How to bring Augmented Reality into HTML, the easy way.
Augmented Reality has proven to be some of the sexiest new technology over the past few years. While savvy companies and programmers are still finding new ways to integrate AR in meaningful ways — for a new developer, dipping their toe into this brave new world seems like bridge too far.
I’m here to say, “Yes, but it doesn’t have to be completely inaccessible”. My hope is that by following this guide, I can inspire some developers out there to have some fun and create some jaw-dropping stuff utilizing Google’s model-viewer augmented reality kit.
Note: In my experience, testing this technology works best with Google Chrome. While Firefox, Safari and other web browsers do support model-viewer, I’ve had the the most consistent results on Chrome.
First let’s import the model-viewer module into our index.html…
Next let’s apply some basic styling…
Great! Now, let’s find a model that we want to render. For this example I’ll be running over to Google’s poly site and using one of their 3D renders which can be found here.
Download the updated GLTF file as well as the USDZ and then drop the entire unzipped folder into your code editor.
Note: Sometimes the file names are less than ideal. Feel free to change them to whatever you want EXCEPT for the .bin file. That one must remain untouched.
Alright, now let’s see if we can render our model!
Fire up your local server of choice and you should see your first 3D model render! Congratulations!
But we can do more…
Model-viewer comes with a number of built-in controls to declare within your HTML that will allow for greater interactivity. Now we can click and drag to move our model around.
Let’s add the rest of our controls!
Wow, that’s a lot. What does all that stuff do?
Auto-rotate provides a steady, elegant rotation. It makes for nice window shopping if you’d like to render multiple objects for a user to select.
the “ar” command alongside sourcing the USDZ file is what allows for augmented reality on mobile devices. Run your application on a mobile browser and you should see an additional button in your 3D-model window — tap it and the world of AR is at your fingertips.
There are addition commands, but these are just a sampling of what other options are out there.
Don’t stop now though! There’s a world of documentation on Google’s site for those curious enough to delve deeper into the AR rabbit-hole. Good luck, and happy rendering!
