<model-viewer> test

<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

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

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

A rectangle with dimensions

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

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

    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

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

Modell files: .gITF .glb
Scene data: .usdz

Alternatives

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