modelviewer.dev

What is ?

<model-viewer> is an open-source web component from Google for embedding interactive 3D models directly into a web page, with optional augmented reality (AR) viewing. It is a custom HTML element rather than a full 3D engine: you point it at a model file and it handles rendering, camera controls, lighting and AR entry for you.

What it actually does

• Displays a 3D model in a normal web page, where visitors can rotate, zoom and inspect it.
• Offers AR modes, so on supported phones the model can be placed into the real environment through the camera.
• Works across current desktop and mobile browsers, including the last two major versions of evergreen browsers and Safari on macOS and iOS.
• Includes a quick-start path, an online editor for testing models and downloading a starter site, plus documentation, examples, an API reference and addons.

Where it fits

It suits product pages, museum and archive showcases, education, configurators and portfolios — anywhere a 3D object needs to be seen without installing an app. A typical reader scenario: an online store selling furniture wants shoppers to spin a chair on the product page and, on a phone, place it in their own living room. A single custom element can cover both.

The trade-off is that WebXR-dependent AR features are not universally available. Browser support for the core element is broad, but WebXR features such as the Device API, HitTest API and DOM Overlay API vary: natively supported in some browsers, available via polyfill in others, behind a flag or unstable elsewhere, and not available at all in some. So AR quality and availability depend on the visitor's device, while plain 3D viewing is the dependable baseline.

Next step

Start with the quick-start guide and the editor to confirm your model loads and looks right, then decide whether your audience needs AR or only interactive 3D. If AR matters, check the browser-support table against your actual audience before committing. The project is licensed under Apache 2.0, so it can be used commercially; the site is at .

How do I add a 3D model to my website using ?

Use the <model-viewer> web component from : you load its JavaScript once, drop a <model-viewer> tag where the model should appear, and point its src attribute at your .glb/.gltf file. The component handles the rendering, camera controls and optional AR launch, so you don't write WebGL or Three.js code yourself.

A minimal page looks like this:

<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer
  src="/models/chair.glb"
  alt="A wooden chair"
  camera-controls
  ar
  poster="/images/chair-poster.webp"
  style="width: 100%; height: 400px;">
</model-viewer>

Key attributes to start with:

• src — path to your model file (GLB is the usual choice; it packs geometry, materials and textures together).
• alt — text description for accessibility and screen readers.
• camera-controls — lets visitors orbit, pan and zoom.
• ar — adds an "view in your space" button on supported phones.
• poster — an image shown while the model loads, so the layout isn't empty.

Practical notes for a real site

• Give the element an explicit size via CSS. A <model-viewer> with no height collapses to nothing.
• Keep file size down: compress textures and geometry before uploading. A multi-megabyte model is the main reason these embeds feel slow.
• Browser support covers the last two major versions of evergreen desktop and mobile browsers plus recent Safari on macOS and iOS. AR modes that rely on WebXR need extra feature support, so treat AR as a progressive enhancement rather than a guarantee.
• Test in the editor on before deploying, and check the documentation and examples there for advanced attributes.

Next step: start with one model and the four attributes above, confirm it loads and rotates on both a desktop browser and a phone, then add ar and a poster once the basics work.

What file formats does support for 3D models?

<model-viewer> is built around the glTF family of formats, which is the standard for real-time 3D on the web. In practice that means:

• glTF (.gltf) — the JSON-based version, usually paired with separate .bin and texture files.
• GLB (.glb) — the single-file binary version that packs geometry, materials and textures together. This is the format most people ship, because one file is simpler to host and load.
• USDZ (.usdz) — used for AR on Apple devices. On iOS, Quick Look expects USDZ, so a typical setup pairs a GLB for the in-page 3D view with a USDZ for the AR handoff.

A few practical points:

• The component does not convert formats for you. If your source file is FBX, OBJ, or something from a CAD tool, you export to glTF/GLB first (Blender, or a converter) and then point the component at the result.
• Textures inside a GLB are usually PNG or JPEG; KTX2 is the common choice when you want smaller, GPU-friendly textures, and it needs the right setup to work.
• USDZ is not a substitute for GLB in the browser view — it is specifically the AR path.

Next step: open the editor at `` and drop in a GLB to check that it renders and animates before you wire it into a page. If you also need AR on iPhones, export a matching USDZ from the same source and test both.

Decision criterion: if you only need an interactive viewer, ship GLB alone. Add USDZ only when iOS AR matters, and expect to maintain two exports of the same model.

How can I make my 3D model appear in augmented reality on a phone?

Use the <model-viewer> web component: it renders a glTF/GLB model in the browser and adds an AR button that hands the model to the phone's native AR viewer. The page lists Quick Start, an Editor for testing models, Documentation, Examples and API Reference, plus a browser-support note covering the last two major versions of evergreen desktop and mobile browsers and the last two Safari versions on macOS and iOS. The component is from Google and licensed under Apache 2.0.

H3 Practical path

1. Export your model as glTF or GLB; keep textures packed or in the same folder.
2. Put a <model-viewer> tag on the page and point src at that file.
3. Set ar and choose ar-modes so phones can use the best available mode.
4. Add a poster image and camera controls so non-AR visitors still see something.
5. Test on a real phone, not just a desktop browser, because AR depends on device and browser support.

H3 What AR needs on the phone For WebXR-based AR, the page notes that the WebXR Device API, WebXR HitTest API and WebXR DOM Overlay API matter. Hit testing places a model on a real surface; DOM overlay lets page UI sit over the AR view. Support varies: natively supported, available with a polyfill, behind a flag and unstable, or not available. On iPhone, Safari's AR Quick Look is often the smoother route, while Android Chrome relies more on WebXR/Scene Viewer-style handoff.

H3 Example scenario A furniture shop wants a sofa in a customer's living room. The customer taps "View in your room," the phone opens AR, and the sofa appears at floor scale. If the phone lacks WebXR, the fallback may be a 3D preview or a native viewer rather than in-page AR. That trade-off is why you should offer both an AR button and a normal interactive 3D view.

H3 Next step Open the Editor at model-viewer to load a test model and copy a starter page. Then check the API Reference for ar, ar-modes, camera-controls and related attributes, and verify behavior on an actual iOS and Android device.

Which browsers support and its AR features?

<model-viewer> targets modern evergreen browsers, with AR support being the more restrictive part.

The component itself 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. That covers current Chrome, Edge, Firefox, and Safari, including mobile Safari, which matters because iOS is where a lot of AR traffic comes from.

AR is where support splits. WebXR-based AR (used when you set ar-modes to include webxr) depends on three separate browser features:

The practical consequence: you cannot assume a browser that renders the 3D model will also run WebXR AR. A browser may display the model fine while lacking one of these APIs, in which case AR fallback modes matter.

If you are building for iOS Safari, test the AR path separately from the viewer path — rendering and AR entry are different capabilities. If you are building for Android Chrome, WebXR support is generally the smoother route, but confirm hit-testing and DOM overlay behaviour on your target devices.

Next step: open the component in the browsers you actually expect your audience to use and check both the model display and the AR button, rather than relying on the version list alone. For current details, see .

Can I customize the appearance or interaction of a 3D model with ?

Yes. <model-viewer> is built for exactly that. You control how the model looks on the page, how visitors manipulate it, and how it behaves when entering augmented reality, all through HTML attributes, CSS and JavaScript rather than by editing the 3D file itself. The official documentation, examples and API reference at cover the full attribute list.

H3 Appearance

• Camera and framing: set initial camera orbit, field of view, and minimum/maximum zoom or orbit limits so the model opens at a flattering angle.
• Lighting and environment: apply an environment image to change reflections and mood, adjust exposure, and add a shadow for grounding.
• Background and transparency: choose a solid color, a gradient, or a transparent canvas so the model sits on your page design.
• Animation: play, pause, and choose among clips baked into the file, or trigger them from your own buttons.

H3 Interaction

• Orbit and zoom: enabled by default; you can restrict rotation axes or lock the camera for a fixed hero shot.
• Hotspots: place annotations anchored to points in 3D space that reveal text or links when tapped.
• AR placement: on supported devices, visitors can drop the model into their room. The AR launch button, its label and its position are yours to style.
• Events and API: listen for load, progress, camera-change and AR-status events to drive your own UI.

H3 What you cannot change this way

Attribute-level customization does not retopologize, retexture or re-rig the asset. If a model needs different materials or a new animation, that work happens in a 3D tool before export. Think of <model-viewer> as the presentation layer, not the authoring layer.

H3 A concrete scenario

A furniture retailer wants a sofa on a product page. They set a transparent background, fix the camera to a three-quarter view, add a hotspot on the cushion fabric that opens a materials panel, and enable AR so a shopper can check the sofa against their living room wall. None of that requires touching the sofa's geometry.

H3 Trade-off to weigh

Every attribute you add is another thing to test across browsers. AR features in particular depend on WebXR support, which varies: some capabilities are native, some need a polyfill, and some sit behind an unstable flag or are unavailable. Build the non-AR experience first, then layer AR on top.

H3 Next step

Open the editor on with your own file, toggle attributes live, and copy the resulting markup into your page. If you are weighing it against a full WebGL framework, compare the effort of a configurable viewer against writing your own renderer — for straightforward product display, the viewer is usually the faster path.