Hotspots

Hotspots are scene elements that float 2D information over the scene, such as images, text, or portions of a configurator. Hotspots are used in a scene to provide additional information or selection functionality to the user. They can popup…

• Text information about a 3D object in the scene. This text can be static or calculated real-time.

• Images from the media folder.

• Videos from online sources.

• Portions of the configurator, such as

  • A simple field for your user to select from.

  • A more complex container of fields and other elements for your user to interact with.

A hotspot can be static or dynamic. It can have a...

• Static position, by specifying its distance from one or two edges of the scene.  It will remain in place on-screen, like a sticker on a piece of glass over the scene, regardless of how your user moves.

• Dynamic position, by being attached to an annotation point within the 3D scene. It will float next to that annotation as the annotation moves, or as your user looks at that annotation from a different viewpoint.

Hotspot Anatomy

The hotspot target is a shape (like a pulsing circle) that attracts attention to a specific part of your 3D scene. It is positioned at an annotation, and usually remains on-screen constantly.

Hotspot Target

The hotspot popup is a two-dimensional sticker placed over the 3D scene. When the user clicks on the hotspot target, the hotspot popup will show.  The popup can be filled with many different kinds of content (as described above).

The hotspot target needs to be tied to a node in the scene so that the hotspot can track its position on the screen as the scene is rotated, panned, or zoomed (see Target Node property below).  You can also define a shape for the target.  For example, you can choose a circle, circle with text, just text, or even the target node itself can act as the target.  You can also control the color of the target, and the target size in some cases.

Here are some example of different target shapes:

When you choose a target shape of 'mesh', then the target node will be used as the target itself.  This can lead to a nice effect, where your users can click around the scene (on the meshes themselves) to learn more information about the components.  

Comparing dimensions, annotations, and hotspots

Hotspot Properties

Property	Description
Basic Properties
Name	A unique name for the hotspot. This is used in Snap rules to manipulate the hotspot (such as showing or hiding it).
Label	A label your user can see when viewing the scene.
Description	A description of the hotspot.
Visible	Specifies whether the hotspot is visible in the UI, or hidden.
Open	Whether the popup of the hotspot is open or closed when the scene first renders on-screen.
Allow the user to close the popup	If true, the hotspot popup will have a close button in the top right that the user can click to close the popup.
Target Properties
Add Target	A boolean indicating whether this hotspot should have a 3D target to follow or not. Set to true, so the hotspot will follow the target around the screen as it moves. Set to false, so the hotspot will be positioned to a fixed point in the user's window, such as near an edge of the window to display a corporate logo.
Target Node	The node in the scene that will be used to position the hotspot target on the screen. You can select any visible mesh, or an invisible mesh connector.
Target Shape	The shape of the hotspot target. Available options are: Circle A 2 dimensional circle will be shown for the target. Circle With Text A 2 dimensional circle with text inside of it. You can control the text using the Target Text property. Image An image will be shown as the target. You can control the image using the Target Image property. Mesh The mesh that is chosen as the Target Node will act as the target. The mesh will light up when the mouse is hovered over it, and clicking will show the popup. Text Text will be shown as the target. You can control the text using the Target Text property.
Target Size	For certain target shapes, the size can be controlled. Use text to represent the number of pixels, such as "18px" or "20px".  There is no space between the number and "px".
Target Text	When 'Target Shape' is either 'circleWithText' or 'text', specify the text that will be shown in the target.
Target Image	When 'Target Shape' is 'image', specify the image in the media folder that will be shown as the target.
Target Color	Controls the color of the target.
Source Properties
Source	Controls the source of the content in the hotspot popup. Values are: None Nothing will appear. Text The name(or label) of the hotspot will be shown in the popup header, and the description of the hotspot will show in the popup body. Media The selected media image or video will show in the popup with no header.  Configurator Element Any element from the configurator associated with this scene can be used. The most common elements used include fields, buttons, or simple groups. The label (or name) of the element will be shown in the popup header, and the element itself will be shown in the popup body.  The configurator element will behave as though it were inside the configurator: fields will display field help and validation rules, for example.
Media File	If Source is set to 'media', then select the media file to show in the popup.
Tooltip Properties
Show Tooltip	Determines whether the tooltip is shown when the user hovers over the target of the hotspot.
Popup Properties
Popup Position	Determines how the popup is positioned. Possible values are: Target - The popup will track the position of the hotspot target. The top left corner of the popup will be at the center of the target. To add an offset, see the PopupOffsetX and PopupOffsetY properties. Manual - The popup will use an absolute position defined by the PopupTop, PopupLeft, PopupBottom, and PopupRight properties.
Keep popup inside the bounds of the viewer	If set to true, will make sure that as the user rotates, pans, and zooms around the screen that the popup will not leave the bounds of the viewer.
Popup Offset X	The x offset (in pixels) of the popup from the hotspot target.
Popup Offset Y	The y offset (in pixels) of the popup from the hostpot target.
Popup Width	The width of the hotspot popup. This setting is given like CSS, so it is expecting text. Such as '35px' or '50%' or 'auto'.
Popup Height	The height of the hotspot popup. This setting is given like CSS, so it is expecting text. Such as '35px' or '50%' or 'auto'.
Animation Properties
Animate to viewpoint when clicked	You can choose a viewpoint that the active camera will move to when the hotspot is clicked. This can be helpful to drive your user's attention to the portion of the product you are highlighting with the hotspot.

While hotspots are a way to float 2D media, text, or configurator elements over the scene, remember that dimensions and annotations are other ways to express information within the 3D space itself. While dimensions and annotations can be either facing a fixed direction or always face the user, hotspots always face the user. Furthermore, hotspots offer more interactivity than annotations or dimensions.

If you allow your 3D scene to appear in xR (augmented reality or virtual reality), note that while the scene renders in iOS devices, hotspots do not – regardless of browser type – due to Apple's proprietary implementation of xR.