examples

Annotations.

Use <model-viewer> to make your models interactive. This page showcases how you can add hotspots to your scene. Child elements are hotspots if their slot begins with "hotspot". The data-position attribute specifies the 3D position of the hotspot in model coordinates, using the same format as the camera-target attribute. The data-normal attribute specifies the normal vector defining the "front" of the hotspot. When this normal is pointed away from the viewer, the hotspot's opacity becomes --min-hotspot-opacity. The interactive example lets you drag and drop your own models and add hotspots by clicking and displays the corresponding position and normal attributes which you can copy into your own page.

You can also specify an attribute to be toggled when the hotspot changes between hidden and visible with data-visibility-attribute. For example, if you set data-visibility-attribute="visible", then <model-viewer> will toggle the data-visible attribute on that hotspot element. This makes it easier to write CSS that styles a hotspot based on its visibility.

When a hotspot's visibility changes, it will dispatch a "hotspot-visibility" event, and event.detail.visible will be true or false depending on whether the hotspot is facing the camera.

Add hotspots