Class: Interaction

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

const interaction = new Interaction(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 ...

// you can also listen on parent-node or any display-tree node,
// source event will bubble up along with display-tree.
// you can stop the bubble-up by invoke ev.stopPropagation function.
scene.on('touchstart', ev => {
  console.log(ev);
})

Extends

• InteractionManager

Members

autoPreventDefault boolean inherited

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:

• false

camera Camera inherited

The renderer this interaction manager works for.

currentCursorMode string inherited

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>)> inherited

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 inherited

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

interactionFrequency number inherited

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

Default Value:

• 10

mouse InteractionData inherited

The mouse data

moveWhenInside boolean inherited

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:

• true

renderer WebGLRenderer inherited

The renderer this interaction manager works for.

scene Scene inherited

The renderer this interaction manager works for.

supportsPointerEvents boolean readonly inherited

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

supportsTouchEvents boolean readonly inherited

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

Methods

destroy () inherited

InteractionManager.js:1680

Destroys the interaction manager

emit (type)this inherited

EventDispatcher.js:53

emit a event

Name	Type	Description
type	String	event type, evnet name

Returns:

Type	Description
this	this

hitTest (globalPoint, root)Object3D inherited

InteractionManager.js:673

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) inherited

InteractionManager.js:1561

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:25

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:37

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) inherited

InteractionManager.js:871

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) inherited

InteractionManager.js:696

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.