liveBook · Manning

glTF

As explained in Web Components in Action

glTF is a standard format for efficiently transmitting and loading 3D scenes and models.

glTF provides a practical format for transmitting and loading 3D scenes and models. Its binary bundle form uses the .glb extension. section 15.2

Use the format through a component when you want to avoid handling the underlying 3D complexity directly:

  • Point a model-viewer element at an Astronaut.glb file to load and display a 3D model. section 15.2
  • Add auto-rotate or controls to make the displayed model rotate automatically or respond to dragging. section 15.2

Minimal model preview

Load the component script, size the element, and provide the binary model: <model-viewer src="Astronaut.glb" controls></model-viewer>. The component handles unpacking and parsing the 3D format before rendering it. 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>

Browse the complete minimal HTML example for loading an Astronaut.glb model with model-viewer. section 15.2

How Web Components in Action covers it

How deep it goes
Defines glTF and .glb, noting that 3D formats require unpacking and parsing, but stops short of explaining those internals.
Examples
Uses Astronaut.glb with model-viewer, background-color, auto-rotate, controls, and an AR-compatible iOS source.
What you can do after
Apply it via model-viewer to load, display, rotate, and drag-interact with a browser-based 3D model.
How it connects
Connects 3D models with model-viewer, WebGL, geometry, materials, textures, and augmented reality.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.