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

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

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 …

Lighting & Environment. Control the lighting and the environment surrounding <model-viewer>. This page showcases the skybox-image attribute, which links to an equirectangular projection …

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.

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!

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

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.