Class InteractionPromptPlugin

Interaction Prompt Plugin

A plugin that adds a hand pointer icon over the canvas that moves to prompt the user to interact with the 3d scene. Pointer icon from google/model-viewer

The pointer is automatically shown when some object is in the scene and the camera is not moving. The animation starts after a delay and stops on user interaction. It then restarts after a delay after the user stops interacting

The plugin provides several options and functions to configure the automatic behaviour or trigger the animation manually.

  • create example

Hierarchy (View Summary)

Constructors

Properties

_dirty: boolean = false
_viewer?: ThreeViewer
_viewerListeners: PartialRecord<
    | "dispose"
    | "*"
    | "update"
    | "preRender"
    | "postRender"
    | "preFrame"
    | "postFrame"
    | "addPlugin"
    | "removePlugin"
    | "renderEnabled"
    | "renderDisabled",
    (e: IViewerEvent) => void,
> = {}
animationDistance: number = 80

Animation distance in pixels

animationDuration: number = 2000

Animation duration in ms

animationPauseDuration: number = 6000
animationRunning: boolean = false
autoStart: boolean = true

Autostart after camera stop

autoStartDelay: number = 30000

Time in ms to wait before auto start after the camera stops.

autoStartOnObjectLoad: boolean = true

Auto start on scene object load. This requires autoStart to be true

autoStartOnObjectLoadDelay: number = 3000
autoStop: boolean = true

Auto stop on user interaction pointer down or wheel

constructor: typeof AViewerPluginSync & typeof AViewerPlugin
currentSphericalPosition?: Spherical
currentTime: number = 0
cursorEl?: HTMLElement
enabled: boolean
lastActionTime: number = Infinity
onlyOnOrbitControls: boolean = true
pointerIcon: string = ...

Pointer icon svg Note: This is directly added to the DOM

rotationDistance: number = 0.3

Camera Rotation distance in radians.

uiConfig?: UiObjectConfig = undefined
yOffset: number = 0

Move the pointer icon up or down. Y offset in the range -1 to 1. 0 is the center of the screen, -1 is the top and 1 is the bottom.

OldPluginType?: string
PluginType: "InteractionPromptPlugin" = 'InteractionPromptPlugin'

Accessors

Methods