Hotspots & Annotations

The Dimensions 3D Viewer provides a client-side (JS) API to easily set up hotspots with annotations on the displayed 3D Model.

Explore Live Demo

If you're not familiar yet with how to get started with the viewer go ahead and read this article first: Getting started with the Dimensions 3D Viewer.

Once you have the viewer set up on your page and loading a model, you can define the hotspots.

Example

Here's the basic code to get the model showing on your page with hotspots:

<body>
 <div id="three-d-viewer"
     style="height: 400px" 
     data-d8s-type="3d"
     data-d8s-id="prod-identifier"> 
 </div>


 <script>
  const d8sApi = initDimensions({
    account: "my-account-name", 
    viewers: ["3D"],
    threeDViewer: {
     viewer: {
       hotspots: {
	  enabled: true,
	  showLabels: true,
          size: "large",
          
          annotations: [
           {            
             mesh: "0.0",
             title: "Seat",
             text: "this is the seat area of the model",
             offset: [0.21, 0.5, -0.72],
           }
         ]
      }       
     }
    }
  });
 </script>
</body>

Mesh Assignment

Hotspots are assigned to objects (typically meshes) within the model. The mesh property of each annotation object is the hierarchal path to to the mesh inside the model.

The path can use either the name of the object or its index within its parent. It's also possible combine the the syntax like this: mesh: "0.frame001". This will target the mesh named "frame001" that is a child of the first object in the model's scene graph.

Explore Live Demo

Reference

Hotspots

Below is the reference to all hotspots configuration properties:

hotspots: {
  //whether to show hotspots
  enabled: false,
  
  //whether to show all hotspots on load
  showOnLoad: true,

  //whether to expand hotspot annotation for mesh when its hovered  (showOnLoad must be false)
  showOnHover: false,

  //whether to always expand hotspots
  showExpanded: false,

  //whether to show labels on hotspots
  showLabels: false,

  //the size of the hotspots (small, medium, large), default: medium
  size: "medium",

  //by default expands on hover, if true, will wait for user to click
  expandOnClick: false,

  //whether to get annotation text from mesh's userData object
  contentFromUserData: false,

  //info of hotspots titles & texts
  annotations: [],
}

Annotation

Below is the reference to the annotation object that hotspots can have 1 or more of.

{
  //the path to the mesh inside the model (See Path Assignment above)
  mesh: String,

  //the text to show inside the hotspot. By default will the index of the annotation
  label: String,

  //the title to show in bold inside the annotation element
  title: String,

  //the text to show inside
  text: String, 

  //tuple array [x,y,z] of offset values to apply on the position 
  offset: Vector3,

  //the size of the hotspots (small, medium, large)
  size: "small" | "medium" | "large",

  //the color to use as the background of the hotspot/annotation
  background: String,

  //the color of the text for the hotspot/annotation
  color: String,
}

Explore Live Demo

Offset

Hotspots are positioned using the mesh's position property (Vector3). The offset is applied on the position's property to make it possible to align the hotspot to the exact location you prefer. Typically a small change (<1) is enough. Using whole integers can cause the hotspot to disappear outside the view.

Title, Text, Label

Colors

By default, the background and text colors of the hotspots and annotations is determined by the theme (light, dark, custom). See reference here.

However, using the background & color properties of the annotation object, its possible to override.