3D Model Viewer
The model viewer creates an interactive 3D object that can be panned, zoomed or animated. The component is a thin wrapper around Google's <model-viewer> custom element, which is documented here: https://modelviewer.dev/
Basic configuration
{assets.54321}
src: https://www.gannett-cdn.com/usat-storytelling/uploads/models/Astronaut.glb
storytellingComponent: model-viewer
{}
That will give you a basic model viewer with default options. It's not interactive by default and has a white background. Here's a more complete example:
{assets.5140349002}
layout: center-well
caption: A 3D model of citrus greening.
credit: Alex Li/The Republic
auto-rotate: 1
height: 400
storytellingComponent: model-viewer
src: https://zijianli16.github.io/citrusscreening/orangeWithLight_0416.gltf
background-color: #455A64
ios-src: https://github.com/zijianli16/citrusscreening/blob/master/orange0413iOSAR.reality?raw=true
camera-controls: on
{}
Any option listed on modelviewer.dev is passed through to the underlying element. You can also set height in pixels.
Usage guide
Use the model viewer when you have a 3D object in .GLB or .GLTF format. You should generally make it interactive (camera-controls: on). If you don't have interactivity, you may be better served by a silent looping video.
Distributed platform appearance
Like most components, the model viewer needs to replace an asset, and that underlying asset will show on distributed platforms. The simplest option is to use a static image of the model (and that image can also work as a poster image on the model-viewer element).