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 Editor 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

Show Dimensions.

Hotspots don't have to be on the model; they can be at arbitrary points in 3D space. Here we demonstrate using hotspots to show a model's dimensions, entirely styled with CSS. A JavaScript function is used to automatically set the dimension values by querying the <model-viewer> element.

By using WebXR mode, this markup works equally well in AR. Note that because the text is not part of the 3D rendering it is easier to read and more accessible.

Camera Views.

Hotspots can contain additional data attributes and can be interactive. This example attaches click events to hotspots to move the camera.

Showcase by hybridherbst / prefrontal cortex.