ComponentsHotspots

Hotspots

Interactive hotspot component for highlighting areas in 3D scenes.

Props and Default Values

The hotspots component uses a cascading system for prop values, with three levels of precedence:

  1. Direct props passed to component
  2. Tour settings configuration
  3. Built-in defaults
PropTypeDefaultDescription
shapeHotspotShapeCircleVisual appearance of hotspots
animationHotspotAnimationProximityAnimation behavior
colorstring”#fff”Hotspot color
hotspotBuilderfunctionundefinedCustom render function

The component reinitializes hotspot settings whenever tour data or override props change.

interface HotspotsProps {
  shape?: HotspotShape;
  animation?: HotspotAnimation;
  color?: string;
  hotspotBuilder?: (
    info: IHotspotRenderingInfo | undefined, 
    distanceToCursor: number
  ) => ReactElement<any>;
}

shape

Controls the visual appearance of hotspots.

enum HotspotShape {
  Default, // Standard hotspot appearance
  Ring,    // Circular ring
  Target,  // Crosshair target
  Circle,  // Filled circle
  Sphere   // 3D spherical shape
}

animation

Defines how hotspots animate.

enum HotspotAnimation {
  None = 0,      // Static, no animation
  Pulse = 1,     // Pulsing effect
  Hover = 2,     // Hover animation
  Proximity = 3  // Responds to cursor proximity
}

color

Custom color for the hotspot. Accepts any valid CSS color value.

hotspotBuilder

Custom render function to override default hotspot appearance.

Usage

Basic Example

<Space>
  <Scene>
    <Hotspots 
      shape={HotspotShape.Ring}
      animation={HotspotAnimation.Pulse}
      color="#FF0000"
    />
  </Scene>
</Space>

Custom Renderer

<Space>
  <Scene>
    <Hotspots 
      hotspotBuilder={(info, distance) => (
        <RubberDuck 
            position={info.position} 
            distance={distance}/>
      )}
    />
  </Scene>
</Space>

Override Behavior

// Priority order:
1. Component prop (if provided)
2. tour.options.tourSettings value (if exists)
3. Default value
 
Example:
shape ?? tour.options.tourSettings.hotspotShape ?? HotspotShape.Circle
FloorplanSpace