Need to show a 3D object without building a scene? Google’s model-viewer is a Web Component for previewing a model on a web page. Start with a script, a sized element, and a model URL: `<model-viewer src="Astronaut.glb"></model-viewer>`. The `.glb` file is a binary bundle of a glTF model; the component hides the work of unpacking it for display. section 15.2
Listing 15.3. A model-viewer component demo
<html>
<head>
<script src="model-viewer.js"></script> #1
<title>Simple Demo for Model Viewer</title>
<style>
body {
margin: 0;
}
model-viewer { #2
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<model-viewer src="Astronaut.glb"></model-viewer> #3
</body>
</html>
The minimal page loads `model-viewer.js`, sizes the element to the viewport, and points `src` at a model. section 15.2
A static preview can feel much like an image. Add `auto-rotate` to turn the model automatically, or `controls` to let a visitor manipulate it; `background-color="#9999bb"` changes its backdrop. These are element attributes, so you can try each change directly in the HTML. section 15.2
Preview a model selected elsewhere on the page
A search interface can sit beside `<model-viewer src="../Astronaut.glb" controls>`. Its search component requests `GLTF2` results, while result images carry a matching glTF URL. This pairs model discovery with an interactive preview rather than treating the preview as a standalone page. section 15.2
For an augmented-reality example, the element keeps its `.glb` source and adds `ios-src="Astronaut.usdz"`. Treat this as a separate model asset to supply, not as a conversion performed by the markup. section 15.2
Listing 15.6. AR with the model-viewer component
<model-viewer src="Astronaut.glb"
background-color="#45aa22"
ios-src="Astronaut.usdz"> #1
</model-viewer>
The AR listing shows the `.glb` source, background color, and separate `.usdz` iOS source together. section 15.2
