liveBook · Manning

Autorotation

As explained in Web Components in Action

Autorotation is automatic continuous rotation of a displayed 3D object or scene.

Autorotation continuously turns a displayed 3D object, making a model more useful than a static image. With model-viewer, enable it declaratively through an attribute. section 15.2

Rotating an astronaut model

<model-viewer src="Astronaut.glb" auto-rotate background-color="#9999bb"></model-viewer> The glTF binary model appears over a colored background and rotates like an astronaut on a slowly turning display. Add controls when viewers should rotate the model by dragging instead. section 15.2

How Web Components in Action covers it

How deep it goes
Demonstrates an attribute-level implementation and contrasts dragging, while deferring rendering and interaction internals to the component.
Examples
Uses an Astronaut.glb model, a lavender background, automatic rotation, and optional drag-based inspection.
What it assumes
Assumes basic HTML custom-element markup and a compatible 3D model URL, while hiding format parsing and rendering complexity.
What you can do after
Apply it via model-viewer by adding auto-rotate to a 3D model element and choosing controls when manual inspection is needed.
How it connects
Connects autorotation with model-viewer, glTF, WebGL, 3D models, and direct-manipulation controls.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

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.