examples

Model Formats. Learn how model formats work on different platforms. This page tests configurations of the model source.

With a glTF model

With a GLB model

DRACO support

<model-viewer> supports loading glTF models that use the DRACO mesh compression extension.

In order to load such models, an auxilliary decoder is required and will be loaded on-demand from a Google CDN when a DRACO-compressed model is detected. See below to learn how to customize this behavior.

By default, the DRACO decoder will be loaded from a Google CDN on-demand. The decoder is open source and distributed for free under the Apache License 2.0.

It is possible to customize where the decoder is loaded from by defining a global configuration option like so:

When customizing the decoder location, you must make sure that the configuration is set before the first <model-viewer> element is created on the page. <model-viewer> will attempt to load the decoder as soon as it loads a glTF that uses the DRACO extension, so be careful to set the configuration early!

Another way to set the decoder location is to look up the constructor for <model-viewer> and configure it directly:

Note that the direct configuration approach will only work after <model-viewer> is defined in the browser (in typical cases, after model-viewer.js has been loaded).

Keep in mind that the DRACO decoder is pretty large (more than 100KB), so it is best only to use DRACO compressed models when the file size savings are larger than the size of the decoder.

With only a USDZ model

Note that this won't display a model (as that requires a glTF or GLB), but could be used with poster to show a static image and the icon to enter augmented reality mode