How to Get Started with ``

<model-viewer> is a web component from modelviewer.dev that lets you display interactive 3D models on a web page and in AR. To get started, load the component script, add a <model-viewer> tag with a src pointing to a .glb model, and set attributes such as camera-controls or ar for the behavior you want. This works in the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari on macOS and iOS.

The fastest path: Editor

The site's Editor is the quickest way to see a model render before you touch your own codebase. It lets you test your 3D models and download a starter website, so you can confirm the model loads and looks correct, then take the generated starting point into your project.

If you already have a .glb file, this avoids hand-writing boilerplate just to check whether the asset is valid.

Minimal setup on your own page

The core pattern is a script tag plus a component tag:

<script type="module"
  src="https://modelviewer.dev/dist/model-viewer.min.js"></script>

<model-viewer
  src="path/to/model.glb"
  alt="A 3D model"
  camera-controls
  ar>
</model-viewer>

What each part does:

• The module script registers the <model-viewer> custom element. Without it, the tag is inert.
• src points to your model file. The component expects a glTF/GLB asset.
• alt provides a text description, which matters for accessibility and for when the model fails to load.
• camera-controls enables user rotation, pan, and zoom.
• ar adds the AR entry point where the browser supports it.

Expected result: the model renders in the page and responds to pointer input. If nothing appears, the usual causes are a wrong src path, a model that isn't valid glTF/GLB, or the script failing to load.

AR support and its browser requirements

AR is optional and depends on browser features beyond basic rendering. Per the site's browser support notes, these are only needed if you want to use WebXR in ar-modes:

So a page can display and rotate a model in browsers where full WebXR AR is unavailable. Treat AR as a progressive enhancement: the model view should stand on its own, with AR added where the environment supports it.

Where to go next

• Documentation covers introduction and much more, including the concepts behind the component.
• Examples show advanced usage you can copy and adapt.
• API Reference lists the available attributes and methods, which is where you look when you need a specific behavior rather than a general setup.
• Addons extend the component beyond its core features.

A practical order: get a model rendering with the minimal setup, verify it in the Editor if something looks wrong, then consult the API Reference only for the specific attribute or method you need.

Common sticking points

• Model doesn't appear. Check the src path and confirm the file is a valid glTF/GLB. A 404 or an unsupported format both produce an empty view.
• Controls don't respond. camera-controls must be present; it is not on by default.
• AR button missing. AR depends on the browser features listed above, and some are polyfilled or flagged. Absence of an AR button does not mean the model failed to load.
• Older browsers. Support targets the last two major versions of evergreen browsers and the last two Safari versions, so very old browsers are outside the supported range.