Adding Hotspots and Information Points to 3D Viewers

What Is a Hotspot?

A hotspot is an interactive marker placed at a specific location on a 3D model. When the user clicks or hovers over it, additional information appears: text, image, or video.

For example, on a laptop model, hotspots are placed near USB ports, above the screen resolution, and on the keyboard area. Each explains the relevant technical detail.

Adding Hotspots with model-viewer

<model-viewer src="laptop.glb" camera-controls>

  <button slot="hotspot-screen"
    data-position="0 0.12 -0.08"
    data-normal="0 0 1">
    <div class="hotspot-info">
      14-inch IPS Display, 2560x1600 resolution
    </div>
  </button>

  <button slot="hotspot-port"
    data-position="-0.15 0.01 0"
    data-normal="-1 0 0">
    <div class="hotspot-info">
      2x USB-C (Thunderbolt 4), 1x USB-A 3.0
    </div>
  </button>

</model-viewer>

Determining Hotspot Position

Method 1: Measuring in Editor

Read coordinates of the desired point on the model in Blender or similar software.

Method 2: model-viewer Editor

model-viewer's official website has an interactive editor. Upload your model and click to determine hotspot positions. The editor automatically generates data-position and data-normal values.

Design Tips

• Use few hotspots: Too many points overwhelm users. 3-5 is ideal.
• Write concise info: One or two sentences per hotspot is enough.
• Ensure visual consistency: Hotspot icons and info boxes should match site design.
• Size for mobile: Hotspots must be finger-tappable.
• Add animation: A subtle pulse or glow animation helps hotspots get noticed.

Conclusion

Hotspots transform the 3D product viewer from a passive visualization tool into an active information source. Especially for technical products, presenting descriptions directly on the 3D model is an effective approach.