Options
All
  • Public
  • Public/Protected
  • All
Menu

Class InteractionManager

The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive if its interactive parameter is set to true This manager also supports multitouch.

reference to pixi.js impl

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

  • new InteractionManager(renderer: Renderer, scene: Scene, camera: Camera, options?: { autoAttach?: boolean; autoPreventDefault?: boolean; interactionFrequency?: number }): InteractionManager

  • Parameters

    • renderer: Renderer

      A reference to the current renderer

    • scene: Scene

      A reference to the current scenevis

    • camera: Camera

      A reference to the current camera

    • Optional options: { autoAttach?: boolean; autoPreventDefault?: boolean; interactionFrequency?: number }
      • Optional autoAttach?: boolean
      • Optional autoPreventDefault?: boolean
      • Optional interactionFrequency?: number

    Returns InteractionManager

Properties

Private _deltaTime

_deltaTime: number

snippet time

member

{Number}

Private _tempPoint

_tempPoint: any

Private activeInteractionData

activeInteractionData: any

Actively tracked InteractionData

member

{Object.<number,InteractionData>}

Private addEvents

addEvents: any

Registers all the DOM events

autoPreventDefault

autoPreventDefault: boolean

Should default browser actions automatically be prevented. Does not apply to pointer events for backwards compatibility preventDefault on pointer events stops mouse events from firing Thus, for every pointer event, there will always be either a mouse of touch event alongside it.

member

{boolean}

default

false

camera

camera: Camera

The renderer this interaction manager works for.

member

{Camera}

Private configureInteractionEventForDOMEvent

configureInteractionEventForDOMEvent: any

Configure an InteractionEvent to wrap a DOM PointerEvent and InteractionData

param interactionEvent

The event to be configured

param pointerEvent

The DOM event that will be paired with the InteractionEvent

param interactionData

The InteractionData that will be paired with the InteractionEvent

returns

the interaction event that was passed in

currentCursorMode

currentCursorMode: string

The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary.

member

{string}

Private cursor

cursor: string

Internal cached let.

member

{string}

cursorStyles

cursorStyles: { default: string; pointer: string }

Dictionary of how different cursor modes are handled. Strings are handled as CSS cursor values, objects are handled as dictionaries of CSS values for interactionDOMElement, and functions are called instead of changing the CSS. Default CSS cursor values are provided for 'default' and 'pointer' modes.

member

{Object.<string, (string|Function|Object.<string, string>)>}

Type declaration

  • default: string
  • pointer: string

didMove

didMove: boolean

eventData

eventData: InteractionEvent

An event data object to handle all the event tracking/dispatching

member

{object}

Private eventsAdded

eventsAdded: boolean

Have events been attached to the dom element?

member

{boolean}

Private getInteractionDataForPointerId

getInteractionDataForPointerId: any

Get InteractionData for a given pointerId. Store that data as well

param event

Normalized pointer event, output from normalizeToPointerData

returns
  • Interaction data for the given pointer identifier

Private interactionDOMElement

interactionDOMElement: HTMLElement

The DOM element to bind to.

member

{HTMLElement}

Private interactionDataPool

interactionDataPool: any

Pool of unused InteractionData

member

{InteractionData[]}

interactionFrequency

interactionFrequency: number

Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked.

member

{number}

default

10

mouse

mouse: InteractionData

The mouse data

member

{InteractionData}

Private mouseOverRenderer

mouseOverRenderer: boolean

Is the mouse hovering over the renderer?

member

{boolean}

moveWhenInside

moveWhenInside: boolean

This property determines if mousemove and touchmove events are fired only when the cursor is over the object. Setting to true will make things work more in line with how the DOM verison works. Setting to false can make things easier for things like dragging It is currently set to false as this is how three.js used to work.

member

{boolean}

default

true

Private normalizeToPointerData

normalizeToPointerData: any

Ensures that the original event object contains all data that a regular pointer event would have

param event

The original event data from a touch or mouse event

returns

An array containing a single normalized pointer event, in the case of a pointer or mouse event, or a multiple normalized pointer events if there are multiple changed touches

Private onClick

onClick: any

Is called when the click is pressed down on the renderer element

param originalEvent

The DOM event of a click being pressed down

Private onPointerCancel

onPointerCancel: any

Is called when the pointer button is cancelled

param event

The DOM event of a pointer button being released

Private onPointerComplete

onPointerComplete: any

Is called when the pointer button is released on the renderer element

param originalEvent

The DOM event of a pointer button being released

param cancelled

true if the pointer is cancelled

param func

Function passed to processInteractive

Private onPointerDown

onPointerDown: any

Is called when the pointer button is pressed down on the renderer element

param originalEvent

The DOM event of a pointer button being pressed down

Private onPointerMove

onPointerMove: any

Is called when the pointer moves across the renderer element

param originalEvent

The DOM event of a pointer moving

Private onPointerOut

onPointerOut: any

Is called when the pointer is moved out of the renderer element

param originalEvent

The DOM event of a pointer being moved out

Private onPointerOver

onPointerOver: any

Is called when the pointer is moved into the renderer element

param originalEvent

The DOM event of a pointer button being moved into the renderer view

Private onPointerUp

onPointerUp: any

Is called when the pointer button is released on the renderer element

param event

The DOM event of a pointer button being released

Private processClick

processClick: any

Processes the result of the click check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

param hit

the result of the hit test on the display object

Private processInteractive

processInteractive: any

This function is provides a neat way of crawling through the scenevis graph and running a specified function on all interactive objects it finds. It will also take care of hit testing the interactive objects and passes the hit across in the function.

param interactionEvent

event containing the point that is tested for collision

param displayObject

the displayObject that will be hit test (recursively crawls its children)

param [func]

the function that will be called on each interactive object. The interactionEvent, displayObject and hit will be passed to the function

param [hitTest]

this indicates if the objects inside should be hit test against the point

param [interactive]

Whether the displayObject is interactive

returns

returns true if the displayObject hit the point

Private processPointerCancel

processPointerCancel: any

Processes the result of the pointer cancel check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

Private processPointerDown

processPointerDown: any

Processes the result of the pointer down check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

param hit

the result of the hit test on the display object

Private processPointerMove

processPointerMove: any

Processes the result of the pointer move check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

param hit

the result of the hit test on the display object

Private processPointerOverOut

processPointerOverOut: any

Processes the result of the pointer over/out check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

param hit

the result of the hit test on the display object

Private processPointerUp

processPointerUp: any

Processes the result of the pointer up check and dispatches the event if need be

param interactionEvent

The interaction event wrapping the DOM event

param displayObject

The display object that was tested

param hit

the result of the hit test on the display object

Private raycaster

raycaster: Raycaster

ray caster, for survey intersects from 3d-scenevis

member

{Raycaster}

Private releaseInteractionDataForPointerId

releaseInteractionDataForPointerId: any

Return unused InteractionData to the pool, for a given pointerId

param pointerId

Identifier from a pointer event

Private removeEvents

removeEvents: any

Removes all the DOM events that were previously registered

renderer

renderer: Renderer

The renderer this interaction manager works for.

member

{WebGLRenderer}

scene

scene: Scene

The renderer this interaction manager works for.

member

{Scene}

Readonly supportsPointerEvents

supportsPointerEvents: boolean

Does the device support pointer events https://www.w3.org/Submission/pointer-events/

readonly
member

{boolean}

Readonly supportsTouchEvents

supportsTouchEvents: boolean

Does the device support touch events https://www.w3.org/TR/touch-events/

readonly
member

{boolean}

Private triggerEvent

triggerEvent: any

Dispatches an event on the display object that was interacted with

param displayObject

the display object in question

param eventString

the name of the event (e.g, mousedown)

param eventData

the event data object

Methods

addEventListener

  • addEventListener(type: string, listener: (event: Event) => void): void

  • Adds a listener to an event type.

    Parameters

    • type: string

      The type of event to listen to.

    • listener: (event: Event) => void

      The function that gets called when the event is fired.

        • (event: Event): void

        • Parameters

          • event: Event

          Returns void

    Returns void

destroy

  • destroy(): void

dispatchEvent

  • dispatchEvent(event: { type: string }): void

  • Fire an event type.

    Parameters

    • event: { type: string }
      • [attachment: string]: any
      • type: string

    Returns void

hasEventListener

  • hasEventListener(type: string, listener: (event: Event) => void): boolean

  • Checks if listener is added to an event type.

    Parameters

    • type: string

      The type of event to listen to.

    • listener: (event: Event) => void

      The function that gets called when the event is fired.

        • (event: Event): void

        • Parameters

          • event: Event

          Returns void

    Returns boolean

hitTest

  • hitTest(globalPoint: { x: number; y: number }, root?: Object3D): Object3D

mapPositionToPoint

  • mapPositionToPoint(point: { x: number; y: number }, x: number, y: number): void

  • Maps x and y coords from a DOM object and maps them correctly to the three.js view. The resulting value is stored in the point. This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.

    Parameters

    • point: { x: number; y: number }

      the point that the result will be stored in

      • x: number
      • y: number
    • x: number

      the x coord of the position to map

    • y: number

      the y coord of the position to map

    Returns void

removeEventListener

  • removeEventListener(type: string, listener: (event: Event) => void): void

  • Removes a listener from an event type.

    Parameters

    • type: string

      The type of the listener that gets removed.

    • listener: (event: Event) => void

      The listener function that gets removed.

        • (event: Event): void

        • Parameters

          • event: Event

          Returns void

    Returns void

setCursorMode

  • setCursorMode(mode: string): void

setObjectsToRaycast

  • setObjectsToRaycast(objects: any): void

setTargetElement

  • setTargetElement(element: HTMLCanvasElement): void

  • Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM elements on top of the renderers Canvas element. With this you'll be bale to deletegate another DOM element to receive those events.

    Parameters

    • element: HTMLCanvasElement

      the DOM element which will receive mouse and touch events.

    Returns void

update

  • update(__namedParameters: { snippet: number }): void

Generated using TypeDoc