Interact with Multiple Models

By placing declarative <extra-model> elements inside <model-viewer>, you can load multiple separate 3D models into a single scene. Each model has its own position offset, orientation, and scale, and can be manipulated individually.

The offset attribute accepts length units (m, cm, mm) per component; unitless numbers are treated as meters. For example, offset="-2.0 0 0" and offset="-200cm 0 0" are equivalent.

The orientation attribute uses the same "roll pitch yaw" convention as model-viewer's orientation: yaw is first applied about the Y-axis, then pitch about the new local X-axis (positive is front-down), then roll about the new local Z-axis. It accepts angle units (deg, rad) per component; unitless numbers are treated as radians. For example, orientation="0deg 0deg 30deg" applies a 30° yaw about the Y axis.

This example displays three models, each showcasing a different type of interaction:

• Sphere (Base Model): Changing material base color factor dynamically.
• Robot (Extra Model 1): Targeting animation play/pause to a specific model index.
• Astronaut (Extra Model 2): Animating the position offset of a model over time.