JH Jakob Holz
post / build log

<model-viewer> test

A test of Google's model-viewer.

/ 3 min/ 3d

<model-viewer> is a free open source web based software which can easily be embedded in any website. Even static sites like this one generated by Hugo can use simple and compact .html snippets to include hosted libraries. And even though this technology was developed by our evil overlords at Google it is a pleasant surprise that it doesn’t even use any cookies.

Please see the examples below.

Examples

A simple model viewer

3D modeldrag to orbit

A simple model viewer with color option

model-viewer
    src="testraeder_m.glb"
    alt="A tetrahedron used for testing."
    color="#737099"

A viewer with fullscreen capability

3D modeldrag to orbit
model-viewer-fullscreen
    src="testraeder_m.glb"
    alt="A tetrahedron used for testing."
    camera-orbit="20deg 20deg 1500m"

A rectangle with dimensions

3D model drag to orbit

A simple embedded 3d model served from the same server and with dimensions 1 m x 2 m x 3 m.

model-viewer-dimensions
    src="testraeder_m.glb"
    alt="A tetrahedron used for testing."
    x_scale="100"
    y_scale="100"
    z_scale="100"
    camera-orbit="0deg 150deg 1500m"

A tiny rectangle with dimensions

3D model drag to orbit

A teeny tiny 123 block for a micron sized machinist with dimensions 1 um x 2 um x 3 um. The fact that models can have these tiny dimensions is important for displaying microscopy data to scale.

model-viewer-dimensions
    src="testraeder_um.glb"
    alt="A small tetrahedron used for testing."
    x_scale="100"
    y_scale="100"
    z_scale="100"
    camera-orbit="0deg 150deg 1500m"

A viewer with the ability to switch between two models

3D model drag to orbit
Model 
model-viewer-switch 
    src1="testraeder_um.glb" 
    src2="testraeder_m.glb"
    btn1-text="Version A" 
    btn2-text="Version B"
    alt="A tetrahedron used for testing."

Features

Some interesting supported functions like:

  • easy loading strategy configuration (lazy/eager)
  • annotations
  • animated annotations
  • preset camera views
  • custom lighting, background, post processing, color-grading, …

Editor: An interactive scene designer allows you to set optical parameters and add annotations to the model. It also automatically generates other support resources like the poster (see below). This amazingly useful tool is available here: modelviewer.dev/editor. It’s browser based but runs locally, ensuring data privacy.

Src: Can be any URL on the web or a local folder, can even provide credentials to fetch models from secured resources.

poster: Display an image while the model is loading. Very nice to hide any delays.

Supported file formats

Model files: .glTF .glb
Scene data: .usdz

Alternatives

  • Three.js Powerful open source 3D library.
  • Sketchfab - Proprietary technology, popular viewer, no option to self-host. I have tested it in this post.

Resources