Type Alias FederatedEventMap3D

The pointer events a Container3D can emit, keyed by event name

The 3D counterpart of pixi.js's FederatedEventMap. Each event is pixi's own event object with the 3D fields added, so one handler reads both the 2D pointer position and the 3D surface it landed on.

Example

mesh.eventMode = 'static';
mesh.hitVolume = 'geometry'; // per triangle, so hits carry a uv
mesh.on('pointertap', (e) => {
  if (!e.hit3D) return;
  marker.position.copyFrom(e.hit3D.point); // where on the mesh the ray landed
  hoveredUv.copyFrom(e.hit3D.uv);          // and where on its texture
});

See

GlobalFederatedEventMap3D For the moves delivered whatever the pointer is over.
Event3DFields For the 3D fields and how long they stay valid.

Properties

click

click: Pointer3DEvent

Fired when a mouse click on this node completes, with any button but the right one

detail counts repeat clicks on the same node, each within 200 ms of the last, so 2 is a double click. A pen fires only pointertap.

Example

mesh.on('click', (e) => {
  if (e.detail === 2) focusOn(mesh);
});

contextmenu

contextmenu: Pointer3DEvent

Fired when the browser is about to open its context menu over this node

Call preventDefault() to keep the menu closed, or stopPropagation() to keep the browser's menu and hide the event from the View's own listeners, such as a camera controller's.

Example

mesh.on('contextmenu', (e) => {
  e.preventDefault();
  openMenuFor(mesh, e.global);
});

mousedown

mousedown: Pointer3DEvent

Fired when a mouse button other than the right one goes down over this node

Example

mesh.on('mousedown', (e) => {
  if (e.button === 1) startPan(e.global); // middle button
});

mouseenter

mouseenter: Pointer3DEvent

Fired when the mouse enters this node; doesn't bubble

Example

mesh.on('mouseenter', () => (tooltip.visible = true));

mouseleave

mouseleave: Pointer3DEvent

Fired when the mouse leaves this node; doesn't bubble

Example

mesh.on('mouseleave', () => (tooltip.visible = false));

mousemove

mousemove: Pointer3DEvent

Fired while the mouse moves across this node

Example

mesh.on('mousemove', (e) => tooltip.position.copyFrom(e.global));

mouseout

mouseout: Pointer3DEvent

Fired when the mouse moves off this node; bubbles, unlike mouseleave

Example

shelf.on('mouseout', (e) => unhighlight(e.target3D));

mouseover

mouseover: Pointer3DEvent

Fired when the mouse moves onto this node; bubbles, unlike mouseenter

Example

// One listener on the shelf hears every item on it
shelf.on('mouseover', (e) => highlight(e.target3D));

mouseup

mouseup: Pointer3DEvent

Fired when a mouse button other than the right one is released over this node

Example

mesh.on('mouseup', (e) => {
  if (e.button === 1) endPan();
});

mouseupoutside

mouseupoutside: Pointer3DEvent

Fired when a mouse button that went down on this node is released anywhere else

Example

mesh.on('mouseupoutside', () => endPan());

pointercancel

pointercancel: Pointer3DEvent

Never fired: pixi delivers no pointer cancellation, in 2D either

Example

// End a drag on these two instead
handle.on('pointerup', endDrag);
handle.on('pointerupoutside', endDrag);

pointerdown

pointerdown: Pointer3DEvent

Fired when a pointer goes down on this node: mouse, touch or pen alike

Example

handle.on('pointerdown', (e) => {
  if (e.hit3D) grabOffset.copyFrom(e.hit3D.localPoint);
});

pointerenter

pointerenter: Pointer3DEvent

Fired when a pointer enters this node; doesn't bubble

Example

button.on('pointerenter', () => button.scale.set(1.1));

pointerleave

pointerleave: Pointer3DEvent

Fired when a pointer leaves this node; doesn't bubble

Example

button.on('pointerleave', () => button.scale.set(1));

pointermove

pointermove: Pointer3DEvent

Fired while a pointer moves across this node

Example

table.on('pointermove', (e) => {
  if (e.hit3D) cursorMarker.position.copyFrom(e.hit3D.point);
});

pointerout

pointerout: Pointer3DEvent

Fired when a pointer moves off this node; bubbles, unlike pointerleave

Example

shelf.on('pointerout', (e) => unhighlight(e.target3D));

pointerover

pointerover: Pointer3DEvent

Fired when a pointer moves onto this node; bubbles, unlike pointerenter

Example

// One listener on the shelf hears every item on it
shelf.on('pointerover', (e) => highlight(e.target3D));

pointertap

pointertap: Pointer3DEvent

Fired when a pointer completes a tap on this node, for any pointer type and any button, right clicks included

Example

mesh.on('pointertap', () => select(mesh));

pointerup

pointerup: Pointer3DEvent

Fired when a pointer is released over this node

Example

handle.on('pointerup', endDrag);

pointerupoutside

pointerupoutside: Pointer3DEvent

Fired when a pointer that went down on this node is released anywhere else

hit3D says what the pointer was released over, if anything.

Example

crate.on('pointerupoutside', (e) => {
  if (e.hit3D) dropOnto(e.hit3D.target);
  endDrag();
});

rightclick

rightclick: Pointer3DEvent

Fired when a right click completes on this node

Example

mesh.on('rightclick', () => openMenuFor(mesh));

rightdown

rightdown: Pointer3DEvent

Fired when the right mouse button goes down over this node

Example

mesh.on('rightdown', (e) => startRotate(e.global));

rightup

rightup: Pointer3DEvent

Fired when the right mouse button is released over this node

Example

mesh.on('rightup', endRotate);

rightupoutside

rightupoutside: Pointer3DEvent

Fired when the right mouse button that went down on this node is released anywhere else

Example

mesh.on('rightupoutside', endRotate);

tap

tap: Pointer3DEvent

Fired when a touch completes a tap on this node

Chrome gives each touch a new pointerId, and detail only counts repeat taps by the same one, so it stays 1 there; time a double tap yourself.

Example

let lastTap = 0;
mesh.on('tap', (e) => {
  if (e.timeStamp - lastTap < 300) focusOn(mesh); // double tap
  lastTap = e.timeStamp;
});

touchcancel

touchcancel: Pointer3DEvent

Never fired: pixi delivers no touch cancellation, in 2D either

Example

// End a drag on these two instead
handle.on('touchend', endDrag);
handle.on('touchendoutside', endDrag);

touchend

touchend: Pointer3DEvent

Fired when a touch lifts off this node

Example

handle.on('touchend', endDrag);

touchendoutside

touchendoutside: Pointer3DEvent

Fired when a touch that started on this node lifts off anywhere else

Example

handle.on('touchendoutside', endDrag);

touchmove

touchmove: Pointer3DEvent

Fired while a touch moves across this node

Example

canvasMesh.hitVolume = 'geometry'; // per triangle, so hits carry a uv
canvasMesh.on('touchmove', (e) => {
  if (e.hit3D) paintAt(e.hit3D.uv);
});

touchstart

touchstart: Pointer3DEvent

Fired when a touch lands on this node

Example

handle.on('touchstart', (e) => startDrag(e.pointerId));

wheel

wheel: Wheel3DEvent

Fired when the wheel turns while the pointer is over this node

Example

panel.on('wheel', (e) => {
  panel.position.z += e.deltaY * 0.01;
});

Type Alias FederatedEventMap3D

Example

See

Index

Properties

Properties

click

Example

contextmenu

Example

mousedown

Example

mouseenter

Example

mouseleave

Example

mousemove

Example

mouseout

Example

mouseover

Example

mouseup

Example

mouseupoutside

Example

pointercancel

Example

pointerdown

Example

pointerenter

Example

pointerleave

Example

pointermove

Example

pointerout

Example

pointerover

Example

pointertap

Example

pointerup

Example

pointerupoutside

Example

rightclick

Example

rightdown

Example

rightup

Example

rightupoutside

Example

tap

Example

touchcancel

Example

touchend

Example

touchendoutside

Example

touchmove

Example

touchstart

Example

wheel

Example

Settings

On This Page