Chapter 308: DragControls

Core Idea

This class can be used to provide a drag'n'drop interaction.

Key Concepts

• objects : Array.<Object3D>: An array of draggable 3D objects.
• raycaster : Raycaster: The raycaster used for detecting 3D objects.
• recursive : boolean: Whether children of draggable objects can be dragged independently from their parent.
• rotateSpeed : number: The speed at which the object will rotate when dragged in rotate mode. The higher the number the faster the rotation.
• transformGroup : boolean: This option only works if the objects array contains a single draggable group object. If set to true, the controls does not transform i…

Code Examples

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

• What it demonstrates: Typical usage of DragControls.

Reference Tables

Constructor

Signature
new DragControls( objects : Array.<Object3D>, camera : Camera, domElement : HTMLElement )

Properties

Property	Description
.objects : Array.<Object3D>	An array of draggable 3D objects.
.raycaster : Raycaster	The raycaster used for detecting 3D objects.
.recursive : boolean	Whether children of draggable objects can be dragged independently from their parent.
.rotateSpeed : number	The speed at which the object will rotate when dragged in rotate mode. The higher the number the faster the rotation.
.transformGroup : boolean	This option only works if the objects array contains a single draggable group object. If set to true, the controls does not transform individual objects but the entire group.

Key Takeaways

1. DragControls extends: EventDispatcher → Controls
2. Most relevant properties: objects, raycaster, recursive, rotateSpeed.

Connects To

• EventDispatcher: parent class
• Controls: parent class
• Source: examples/jsm/controls/DragControls.js