Showing 3D model right in your mobile browser is a unique feature currently developed for Chrome and Safari, but it requires different formats that will be discussed.

The power of these features is that they will let you see 3D models in Augmented Reality just by adding a few lines of code!

Final Result

The end result will be a page like this: dope-chair-model-viewer.glitch.me

a DOPE 3D Chair

Getting Started

Add these scripts to the page and you will get a new HTML element model-viewer. This element was created by Google to speed up the adoption of AR.

  1. Include Dependencies to support all major browsers:
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"
>
</script>

<script
nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"
>
</script>

2. Add a <model-viewer> element with a src and you’ll see a 3D model on your web page. Remember that models have to be in the GLTF format with an extension like ".glb" or ".gltf". You can read more about the GLTF standard here.

<model-viewer src="assets/model3d.gltf" alt="this is a 3d model">
</model-viewer>

3. To be able to see the model with Augmented Reality on Android, just add the attribute ar to the element. If you want to see it on iOS**,** you will have to skip to the following sections:

<model-viewer **ar** src="assets/model3d.gltf" alt="this is a 3d model">
</model-viewer>

GLTF is the new JPG

GLTF is becoming the most common 3D format on the web, and you can get many free GLTF models for your tests from here:

Or you could register yourself on Sketchfab where you can download hundreds of GLTF models for free: https://sketchfab.com/

If you want a 3D model from GitHub, you need to remember to proxy CORS, but never do it in production! In this case, I used Glitch to host the 3D model.

<model-viewer
**src="**[**https://cdn.glitch.com/ea8aad0f-c4ad-4fee-b2aa-0174986b2895%2Fchair.glb?v=1569230891112**](https://cdn.glitch.com/ea8aad0f-c4ad-4fee-b2aa-0174986b2895%2Fchair.glb?v=1569230891112)**"
**
alt="a 3D model of a chair"
auto-rotate
camera-controls
background-color="#ffffff"
ar
magic-leap
unstable-webxr
>

</model-viewer>

USDZ for iOS

To showcase a 3D model directly from the browser on iOS you need a USDZ file. Luckily it’s possible by using Designar:

After uploading this 3D model on Github, you can add the ios-src like ios-src="the url to the usdz file /chair.usdz".

<model-viewer
src="[https://cdn.glitch.com/ea8aad0f-c4ad-4fee-b2aa-0174986b2895%2Fchair.glb?v=1569230891112](https://cdn.glitch.com/ea8aad0f-c4ad-4fee-b2aa-0174986b2895%2Fchair.glb?v=1569230891112)"
**ios-src="**[**https://github.com/riccardogiorato/dope-chair-model-viewer/raw/master/model/chair.usdz**](http://crossorigin.me/https://github.com/riccardogiorato/dope-chair-model-viewer/raw/master/model/chair.usdz)**"
**
alt="a 3D model of a chair"
auto-rotate
camera-controls
background-color="#ffffff"
ar
magic-leap
unstable-webxr
>

</model-viewer>

Other options

There are many other options you might want to use. Here are some:

Check out this resource for more information on model-viewer.

Playground with

You can look at the entire code here: https://glitch.com/~dope-chair-model-viewer

References and Resources: