a3d-hot-spot

Description

Description

The <a3d-hot-spot> web component allows displaying interactive points in the 3D viewer. To define its visual representation, you must include HTML content inside the element.

There are two types of hot spots:

• World hot spots: Placed directly under the <a3d-viewer> element.
• Surface hot spots: Children of an <a3d-model> element, positioned relative to the model’s surface.

Installation

Using npm :

npm install @a3d-viewer/viewer

Importing a3d-hot-spot:

import '@a3d-viewer/viewer'

Usage

World Hot Spot Example

<a3d-viewer>
  <!-- .... -->
  <a3d-hot-spot
    position="1 1 0"
    normal="1 1 0"
    camera-orbit="1 1 2"
  ></a3d-hot-spot>
  <!-- .... -->
</a3d-viewer>

Surface Hot Spot Example

<a3d-viewer>
  <!-- .... -->
  <a3d-model src="model.glb">
    <a3d-hot-spot
      mesh-index="1"
      point-index="1 2 3"
      barycentric="1 2 3"
      camera-orbit="1 1 2"
    ></a3d-hot-spot>
  </a3d-model>
  <!-- .... -->
</a3d-viewer>

Styling

The <a3d-hot-spot> element provides styling flexibility, but some aspects are the responsibility of the user:

• undefined state: Users should manage the visibility of hot spots before they are fully defined to prevent them from briefly appearing.

  a3d-hot-spot:not(:defined) {
    display: none;
  }

• back-facing state: Users can manage opacity adjustments when the hot spot faces away from the camera.

  a3d-hot-spot:state(back-facing) {
    opacity: 20%;
  }

• invalid state: This is automatically handled, hiding the hot spot if it is invalid.

  :host(:state(invalid)) {
    display: none;
  }

Attributes

position (world only)

Defines the fixed world-space position of the hot spot.

<a3d-hot-spot position="0.5 1 -2"></a3d-hot-spot>

normal (world only)

Defines the fixed world-space normal of the hot spot.

<a3d-hot-spot normal="0 1 0"></a3d-hot-spot>

mesh-index (surface only)

Defines the index of the mesh within the parent <a3d-model>.

<a3d-hot-spot mesh-index="2"></a3d-hot-spot>

point-index (surface only)

Defines the three point indices of the hot spot.

<a3d-hot-spot point-index="1 2 3"></a3d-hot-spot>

barycentric (surface only)

Defines the three barycentric coordinates of the hot spot.

<a3d-hot-spot barycentric="0.2 0.3 0.5"></a3d-hot-spot>

camera-orbit (world & surface)

Defines an optional camera orbit for the hot spot.

<a3d-hot-spot camera-orbit="0 90 2"></a3d-hot-spot>

Functions

getHotSpotToRef()

Populates the provided result object with the hot spot’s canvas and scene coordinates, as well as its visibility status. This function is typically used by the focusHotSpot method of the <a3d-viewer> component.

API