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

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 …

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

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.

Use the camera-controls attribute to enable user interaction <model-viewer camera-controls touch-action="pan-y" src="../../shared-assets/models/Astronaut.glb" alt="A 3D model of an …

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

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

Animation. Use <model-viewer> to show off your animated models. This page showcases how you can control models with animations

<model-viewer id="sphere" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/reflective-sphere.gltf" ar alt="A 3D model of a sphere"> <div …