Class MultiSelect

A class for selecting objects in a scene.

Example

Here's some boilerplate to setup the three-multi-select.

import { MultiSelect } from 'three-multi-select';
// Boilerplate code to setup a scene
const scene = new THREE.Scene();
// Everything that is selectable goes into this group.
const group = new THREE.Group();
scene.add(group);

// Boilerplate code to setup three
const camera = new THREE.PerspectiveCamera();
const renderer = new THREE.WebGLRenderer();

// We will use the OrbitControls from three.js
const controls = new OrbitControls(camera, renderer.domElement);

// Everything is now ready for the multi select.
const multiSelect = new MultiSelect(
     // First we provide a camera
     camera,
     // Then we provide a `DOMElement` that we can use to attach JavasScript event listeners to.
     renderer.domElement,
     // Then, we provide an array of objects that are selectable. In this case, our group.
     group.children,
     // Finally, we provide a configuration object.
     {
     cameraControls: controls,
},

Example

Objects are now selectable. But nothing will happen. We can listen to selecrt and deselect events like this:

multiSelect.addEventListener<'select', Mesh>('select', (event) => {
     const { object } = event;
});

multiSelect.addEventListener<'deselect', Mesh>('deselect', (event) => {
     const { object } = event;
});

);

Hierarchy

Constructors

constructor

Properties

activePointers camera config domElement enabled ignorePointerEvent mouseButtons object onContextMenuEvent onPointerDownEvent onPointerMoveEvent onPointerUpEvent proxy scene selectedObjects state touches transformControls

Methods - Methods

dispatchEvent hasEventListener removeAllEventListeners removeEventListener

Methods - Other

_onContextMenu _onDraggingChanged _onPointerDown _onPointerMove _onPointerUp activate addEventListener attachObjectToTransformControl deactivate deselectAllObjects deselectObject detachObjectToTransformControl dispose findPointerById findPointerByMouseButton getRaycaster getTransformControls handleTransformControlsCenter selectObject updateConfig updatePointer updateRaycaster install

Constructors

constructor

Properties

Private activePointers

activePointers: PointerInput[] = []

An array of pointers that are currently active on the canvas.

Private camera

camera: PerspectiveCamera | OrthographicCamera

The THREE.Camera used to render the scene.

Private config

config: Config

The Config used by this instance. Will respect the defaults set in DefaultConfig.

Private domElement

domElement: HTMLElement

The HTMLElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will not set up new event listeners.

enabled

enabled: boolean

When set to false, the controls will not respond to user input.

Default

true

Private ignorePointerEvent

ignorePointerEvent: boolean

s This variable can be set by a third party to prevent the pointer up event from being triggered. For example, the TransformControl has higher "access" and will set this to true when it is active.

mouseButtons

mouseButtons: MouseButtons

This object contains references to the mouse actions used by the controls.

Private object

object: Object[]

Objects that can be selected.

Private onContextMenuEvent

onContextMenuEvent: ((this, event) => void)

Type declaration

    • (this, event): void

    • Parameters

      • this: HTMLElement
      • event: MouseEvent

      Returns void

Private onPointerDownEvent

onPointerDownEvent: ((event) => void)

Type declaration

    • (event): void

    • Parameters

      • event: PointerEvent

      Returns void

Private onPointerMoveEvent

onPointerMoveEvent: ((event) => void)

Type declaration

    • (event): void

    • Parameters

      • event: PointerEvent

      Returns void

Private onPointerUpEvent

onPointerUpEvent: ((event) => void)

Type declaration

    • (event): void

    • Parameters

      • event: PointerEvent

      Returns void

Private proxy

proxy: Object3D<Event>

A proxy object that is used by the transform controls.

scene

scene: Scene

The THREE.Scene used to render the transform controls.

Private selectedObjects

selectedObjects: Object[]

The objects that are currently selected.

Private state

state: number

The current state of the control.

touches

touches: Touches

This object contains references to the touch actions used by the controls.

Private transformControls

transformControls: null | TransformControls

The TransformControls used to transform selected objects. This is only available if useTransformControls is set to true in the constructor.

Methods - Methods

dispatchEvent

hasEventListener

removeAllEventListeners

removeEventListener

Methods - Other

Private _onContextMenu

  • _onContextMenu(event): void

  • Parameters

    • event: MouseEvent

    Returns void

Private _onDraggingChanged

  • _onDraggingChanged(storeInitialState): void

  • Handle transform state. On pointer down, we store the initial state of the selected objects. On pointer up, we calculate the new state of the selected objects and dispatch the appropriate events.

    Parameters

    • storeInitialState: boolean

      Store the initial state of the selected objects if true.

    Returns void

Private _onPointerDown

  • _onPointerDown(event): void

  • Set the state of the controls. All actions are then handled by the pointerUpEvent.

    Parameters

    • event: PointerEvent

      PointerEvent

    Returns void

Private _onPointerMove

  • _onPointerMove(event): void

  • Parameters

    • event: PointerEvent

    Returns void

Private _onPointerUp

  • _onPointerUp(event): void

  • Given a state, try to perform an action.

    Parameters

    • event: PointerEvent

      PointerEvent

    Returns void

activate

  • Adds the event listeners of the controls.

    Returns void

addEventListener

Private attachObjectToTransformControl

  • Attaches the proxy object to the transform control.

    Returns void

deactivate

  • Removes the event listeners of the controls.

    Returns void

deselectAllObjects

  • De-selects all objects and detaches them from the transform control.

    Returns void

deselectObject

  • De-selects an object and detaches it from the transform control.

    Type Parameters

    • T extends Object<T>

    Parameters

    • object: T

    Returns void

Private detachObjectToTransformControl

  • Detaches the proxy object from the transform control.

    Returns void

dispose

  • Should be called if the controls is no longer required.

    Returns void

Protected findPointerById

Protected findPointerByMouseButton

getRaycaster

  • Returns the internal Raycaster instance that is used for intersection tests.

    Returns Raycaster

getTransformControls

  • Gets the transform controls instance.

    Returns null | TransformControls

    The transform controls instance.

Private handleTransformControlsCenter

  • Computes the center of all selected objects and offsets them accordingly.

    Returns void

selectObject

  • Selects an object and attaches it to the transform control.

    Type Parameters

    • T extends Object<T>

    Parameters

    • object: T

    Returns void

updateConfig

  • Updates the configuration of the controls.

    Parameters

    • newConfig: Partial<Config>

      The new configuration.

    Returns void

Private updatePointer

  • Parameters

    • event: PointerEvent

    Returns void

Private updateRaycaster

  • Parameters

    • event: PointerEvent

    Returns void

Static install

  • Installs the necessary functions to the prototype of the given classes.

    Returns void

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc