Three-multi-select NPM

three-multi-select

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

Example

Demo

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

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.