A reference to the current renderer
A reference to the current scenevis
A reference to the current camera
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.
The renderer this interaction manager works for.
The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary.
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.
An event data object to handle all the event tracking/dispatching
Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked.
The mouse data
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.
The renderer this interaction manager works for.
The renderer this interaction manager works for.
Does the device support pointer events https://www.w3.org/Submission/pointer-events/
Does the device support touch events https://www.w3.org/TR/touch-events/
a ticker
Adds a listener to an event type.
The type of event to listen to.
The function that gets called when the event is fired.
Destroys the interaction manager
Fire an event type.
Checks if listener is added to an event type.
The type of event to listen to.
The function that gets called when the event is fired.
Hit tests a point against the display tree, returning the first interactive object that is hit.
A point to hit test with, in global space.
The hit display object, if any.
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.
the point that the result will be stored in
the x coord of the position to map
the y coord of the position to map
Removes a listener from an event type.
The type of the listener that gets removed.
The listener function that gets removed.
Sets the current cursor mode, handling any callbacks or CSS style changes.
cursor mode, a key from the cursorStyles dictionary
set objects to raycast
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.
the DOM element which will receive mouse and touch events.
Updates the state of interactive objects. Invoked by a throttled ticker.
Generated using TypeDoc
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
import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three'; import { Interaction } from 'three.interaction'; const renderer = new WebGLRenderer({ canvas: canvasElement }); const scenevis = new Scene(); const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
const interaction = new Interaction(renderer, scenevis, camera); // then you can bind every interaction event with any mesh which you had
addintoscenevisbefore const cube = new Mesh( new BoxGeometry(1, 1, 1), new MeshBasicMaterial({ color: 0xffffff }), ); scenevis.add(cube); cube.on('touchstart', ev => { console.log(ev); });cube.on(PointerEvents.POINTER_DOWN, 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. scenevis.on('touchstart', ev => { console.log(ev); })