3D models without a 3D programmer
Adding a 3D model to a web page usually means building a custom viewer that works across phones, desktops, and emerging head-mounted displays. That viewer must handle responsive layout, progressive rendering quality, accessibility, and performance on everything from low-end phones to AR-capable devices. Building that from scratch requires specialized 3D programming skills, which is a steep barrier for developers who simply want to host their own models without a third-party service.
The <model-viewer> web component removes that barrier. It lets you embed a 3D model with declarative HTML, host the model on your own site, and get responsive behavior plus AR support on compatible devices — without needing to understand the underlying rendering platform.
A quick note on web components
A web component is a custom HTML element built from standard web platform features. From the outside, it behaves like any other element: it has its own tag, supports properties and methods, and can fire and respond to events. That means no special knowledge is required to use <model-viewer>, or any other web component, in your markup.
Core capabilities
Basic embedding
Embedding a model using GLB files works in all major browsers with minimal markup:
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
Motion and user control
Adding the auto-rotate and camera-controls attributes enables automatic rotation and interactive camera manipulation. Many more attributes exist; the full attribute list is documented on the project's site.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Poster images for slow loads
3D assets take time to fetch. The poster attribute displays a static image until the model is ready. You can generate a poster that visually matches the 3D render using the model-viewer editor.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Responsive behavior and efficiency
The component scales automatically for mobile and desktop layouts. It also handles multiple models per page, and uses Intersection Observer to pause rendering when a model is off-screen, saving battery and GPU cycles.
Because the editor generates poster images that match the render at varying aspect ratios, a single poster can remain consistent with the displayed model even as <model-viewer> resizes responsively.
Beyond the basics
More advanced features are covered in the <model-viewer> documentation, including ground-projected skyboxes, animated textures, and interactive hotspots.
