three-multi-select

A control for three.js, similar to THREE.OrbitControl, that supports multi select and transforming multiple objects at once.

Demo

Check the examples folder or visit one of the links below:

• Simple
• Kitchen Sink

Docs

Auto-generated docs can be found here.

Instructions

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,
    },
);

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

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

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

Config

| Name | Type | Default | Description | | --------------------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | recursive | boolean | false | If true, it also checks all descendants. Otherwise it only checks intersection with the object. | | useTransformControls | boolean | true | Whether to use THREE's TransformControls. If true, one can transform all selected objects as a group. | | transformControls | THREE.TransformControls or null | null | Provide a custom TransformControls. If empty, a new controller will be created. | | cameraControls | GenericControls or null | null | Provide a reference to a camera controller. When using TransformControls, it will disable the cameraControls. N.B; The provided objet must expose an enabled property. | | deselectOnRaycastMiss | boolean | false | If true, any raycast miss will result in a deselect. * Note that camera controls may interfere with this logic. |

Events

Generic events:

activate

deactivate

addEventListener

removeEventListener

removeAllEventListeners

dispose

Object events:

selectObject

deselectObject

deselectAllObjects