<model-viewer> is supported on the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari (on MacOS and iOS).

Use the QR Code to open your edited model, environment image, and <model-viewer> snippet on a mobile device to test out AR features. After every subsequent change, click the "Refresh Mobile" button.

<model-viewer> supports and plans to support only glTF/GLB 3D models. It is the Khronos standard known as the JPEG of 3D and the first format to standardize Physically-Based Rendering (PBR), …

Any child element under <model-viewer> with a slot name starting with "hotspot" will be aligned with the 3D model using its data-position and data-normal attributes in model coordinates, in the same format …

They compare the <model-viewer> default button in the bottom right and a custom button ("👋 Activate AR") in the top right of the viewport, with a custom style.

Changes you made ahead of time will not be reflected in Scene Viewer, since this app downloads the original model again from its URL. iOS Quick Look will reflect your changes as long as ios-src is not …

A JavaScript function is used to automatically set the dimension values by querying the <model-viewer> element. Hotspots can be queried to build custom overlays in screen space.

The <model-viewer-effects> library addon for <model-viewer> provides you with a easy-to-use postprocessing workflow for spicing up your models. The list of currently support effects is: SMAA, …

Lazy Loading. Improve UX with these cost-saving <model-viewer> configurations. This page tests usages of the <model-viewer> element using the poster attribute.

Play and control several different animations of the model simultaneously or create new modes by combining them!