Skip to Main ContentSkip to Footer

AR models in the Web on Android and iOS

September 24, 2019

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[](https://cdn-images-1.medium.com/max/800/1*E-Xdx2R3DA_4RQt8aeNmng.png) 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:

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.


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”>

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

alt=“a 3D model of a chair” auto-rotate camera-controls background-color=“#ffffff” ar magic-leap unstable-webxr>

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

ios-src=”https://github.com/Giorat/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>

Other options

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

  • auto-rotate : enables the rotation of the model
  • camera-controls: enables a user to control the model by touch or click
  • shadow-intensity: opacity of the shadow [0..1]. The default value is 0.
  • autoplay: starts either a first animation or a specified animation in the model
  • animation-name: selects the animation by name

Check out this resource for more information on [<model-viewer>](https://googlewebcomponents.github.io/model-viewer/) .

Playground with

References and Resources:

Learn How to Code - Find Coding Tutorials | gitconnected
Learn any programming language, framework, or library from tutorials submitted and ranked by developers. Tutorials are…gitconnected.com


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter