Adding a 3D Product Viewer to Your Website: Beginner Guide

What Is model-viewer?

model-viewer is an open-source web component developed by Google. Designed to display 3D models on any web page, it requires no WebGL knowledge and works with just a few lines of HTML.

Setup

A single script tag is enough to add model-viewer to your page:

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

Basic Usage

<model-viewer
  src="/models/product.glb"
  alt="Product 3D view"
  camera-controls
  auto-rotate
  style="width: 100%; height: 400px;"
></model-viewer>

That is it. The code above creates a rotatable and zoomable 3D viewer.

Key Attributes

• camera-controls: Allows users to rotate the model with mouse/touch
• auto-rotate: Model rotates automatically, stops when user interacts
• ar: Activates the AR button on supported devices
• ios-src: Specifies USDZ file for Apple devices
• poster: Placeholder image shown until model loads
• loading="lazy": Lazy loading for page performance

Adding AR Support

<model-viewer
  src="/models/product.glb"
  ios-src="/models/product.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
>
  <button slot="ar-button">View in AR</button>
</model-viewer>

Performance Tips

1. Use a poster: Show a static image while the model loads. This improves perceived speed and prevents layout shift.
2. Lazy loading: Do not load the model before it is visible. Use loading="lazy" or reveal="interaction" attributes.
3. Optimize model size: Reduce GLB file size with Draco compression.

Conclusion

model-viewer is the easiest way to add a 3D viewer to your website. It has no framework dependency and works in all modern browsers.