Notes on model-viewer - from 2023

model-viewer in augmented reality mode

A couple of friends contacted me about Tarkine, model-viewer and that augmented reality mode. It works!

Tarkine is a big model, so when it first appears it looks huge. It is easily scaled down using a "pinch" gesture. This is Tarkine parked on the floor.

Tarkine as it appears in model-viewer augmented reality mode.
Tarkine as it appears in model-viewer augmented reality mode.

This is a short video of Skyluxe having parked itself on the office carpet. Very cool.

Video of Skyluxe in augmented reality.

model-viewer

I've seen on other websites those components that let you zoom in and out of and rotate a 3D model. I did a bit of research and found that you can do it using Three.js. That looks like a very capable library but I really wanted something very simple. I found it in a Google project called model-viewer.

This is a straightforward component to set up, but you should be aware of a couple of things - I wasted quite a bit of time on these:

  1. The model-viewer component has to run in a web server. You can't build a test page on your laptop - it just doesn't work - unless you are running a web server on your laptop which is very possible.
  2. You have to give the model-viewer component dimensions otherwise it doesn't appear - well, it didn't for me.
  3. It requires that your model is in glTF/GLB format. My Skyluxe model converted very easily to a .glb file straight from Blender. Tarkine though was very problematic and kept on failing. In the end I converted Tarkine from .blend to .fbx, and then from .fbx to .glb. That seemed to work fine.

The html looks something like this:

In the <head> of your page include the stylesheet and the js, and give it a size ...

                          
<!-- Link to my modelviewer stylesheet. -->
<link rel="stylesheet" href="css/MVStyles.css">
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.2.0/model-viewer.min.js"></script>
<style>
  model-viewer{
    width:100%;
    height:600px;
    margin: 0 auto;
  }
</style>

In the <body> use the model-viewer component referencing your model ...

                          
<model-viewer src="assets/SkyLuxev06ModelTextured.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="assets/SkyluxePoster.jpeg" shadow-intensity="1.24" environment-image="assets/aircraft_workshop_01_1k.hdr" shadow-softness="0.85" camera-orbit="26.12deg 80.71deg 477.3m" field-of-view="22.98deg">
   <div class="progress-bar hide" slot="progress-bar">
      <div class="update-bar"></div>
      </div>
      <button slot="ar-button" id="ar-button">
         View in your space
      </button>
      <div id="ar-prompt">
      <img src="assets/ar_hand_prompt.png">
   </div>
</model-viewer>  
 
<!-- modelviewer script -->
<script src="js/MVScript.js"></script>

I created the "look and feel" I wanted in model-viewer's editor and saved the code snippet it produced. The amazing thing you get for free with this Google component is the augmented reality feature. If you open the web page on your phone, you can put the model in your environment (viewed through the phone) and move around it. Quite amazing but be patient - it takes a while to load.

Back to top