Class: InteractionManager

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);

const interactionManager = new InteractionManager(renderer, scene, camera);
// then you can bind every interaction event with any mesh which you had `add` into `scene` before
const cube = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshBasicMaterial({ color: 0xffffff }),
);
scene.add(cube);
cube.on('touchstart', ev => {
  console.log(ev);
});

cube.on('mousedown', ev => {
  console.log(ev);
});

cube.on('pointerdown', ev => {
  console.log(ev);
});
// and so on

Extends

• EventDispatcher

Members

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.

Default Value:

• true

camera Camera

The renderer this interaction manager works for.

currentCursorMode string

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

cursorStyles Object.<string, (string|function()|Object.<string, 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.

eventData object

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

interactionFrequency number

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

Default Value:

• 10

mouse InteractionData

The mouse data

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.

Default Value:

• false

raycaster Raycaster

ray caster, for survey intersects from 3d-scene

renderer WebGLRenderer

The renderer this interaction manager works for.

scene Scene

The renderer this interaction manager works for.

supportsPointerEvents boolean readonly

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

supportsTouchEvents boolean readonly

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

Methods

destroy ()

InteractionManager.js:1640

Destroys the interaction manager

emit (type, event)this inherited

EventDispatcher.js:53

emit a event

Name	Type	Description
type	String	event type, evnet name
event	Object	event object, include more information

Returns:

Type	Description
this	this

hitTest (globalPoint, root)Object3D

InteractionManager.js:679

Hit tests a point against the display tree, returning the first interactive object that is hit.

Name	Type	Description
globalPoint	Point	A point to hit test with, in global space.
root	Object3D	optional The root display object to start from. If omitted, defaults to the last rendered root of the associated renderer.

Returns:

Type	Description
Object3D	The hit display object, if any.

mapPositionToPoint (point, x, y)

InteractionManager.js:940

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.

Name	Type	Description
point	Vector2	the point that the result will be stored in
x	number	the x coord of the position to map
y	number	the y coord of the position to map

off (type, fn)this inherited

EventDispatcher.js:24

proxy removeEventListener function

Name	Type	Description
type	String	event type, evnet name
fn	function	callback, which you had bind before

Returns:

Type	Description
this	this

on (type, fn)this inherited

EventDispatcher.js:11

proxy addEventListener function

Name	Type	Description
type	String	event type, evnet name
fn	function	callback

Returns:

Type	Description
this	this

once (type, fn)this inherited

EventDispatcher.js:36

binding a once event, just emit once time

Name	Type	Description
type	String	event type, evnet name
fn	function	callback

Returns:

Type	Description
this	this

setCursorMode (mode)

InteractionManager.js:875

Sets the current cursor mode, handling any callbacks or CSS style changes.

Name	Type	Description
mode	string	cursor mode, a key from the cursorStyles dictionary

setTargetElement (element)

InteractionManager.js:702

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.

Name	Type	Description
element	HTMLCanvasElement	the DOM element which will receive mouse and touch events.

update (deltaTime)

InteractionManager.js:818

Updates the state of interactive objects. Invoked by a throttled ticker.

Name	Type	Description
deltaTime	number	time delta since last tick