This class can be used to provide a drag'n'drop interaction.
[name] is an add-on, and must be imported explicitly. See [link:#manual/introduction/Installation Installation / Addons].
import { DragControls } from 'three/addons/controls/DragControls.js';
const controls = new DragControls( objects, camera, renderer.domElement );
// add event listener to highlight dragged objects
controls.addEventListener( 'dragstart', function ( event ) {
event.object.material.emissive.set( 0xaaaaaa );
} );
controls.addEventListener( 'dragend', function ( event ) {
event.object.material.emissive.set( 0x000000 );
} );
[example:misc_controls_drag misc / controls / drag ]
[page:Array objects]: An array of draggable 3D objects.
[page:Camera camera]: The camera of the rendered scene.
[page:HTMLDOMElement domElement]: The HTML element used for event listeners. (optional)
Creates a new instance of [name].
Fires when the user starts to drag a 3D object.
Fires when the user drags a 3D object.
Fires when the user has finished dragging a 3D object.
Fires when the pointer is moved onto a 3D object, or onto one of its children.
Fires when the pointer is moved out of a 3D object.
See the base [page:Controls] class for common properties.
An array of draggable 3D objects.
The internal raycaster used for detecting 3D objects.
Whether children of draggable objects can be dragged independently from their parent. Default is `true`.
The speed at which the object will rotate when dragged in `rotate` mode. The higher the number the faster the rotation. Default is `1`.
This option only works if the [page:DragControls.objects] array contains a single draggable group object. If set to `true`, [name] does not transform individual objects but the entire group. Default is `false`.
See the base [page:Controls] class for common methods.
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/DragControls.js examples/jsm/controls/DragControls.js]