DragControls: Add rotate mode.

docs/examples/en/controls/DragControls.html

@@ -111,6 +111,16 @@ <h3>[property:Boolean transformGroup]</h3>
 			If set to `true`, [name] does not transform individual objects but the entire group. Default is `false`.
 		</p>
 
+		<h3>[property:String mode]</h3>
+		<p>
+			The current transformation mode. Possible values are `translate`, and `rotate`. Default is `translate`.
+		</p>
+
+		<h3>[property:Float rotateSpeed]</h3>
+		<p>
+			The speed at which the object will rotate when dragged in `rotate` mode. The higher the number the faster the rotation. Default is `1`.
+		</p>
+
 		<h2>Methods</h2>
 
 		<p>See the base [page:EventDispatcher] class for common methods.</p>

examples/jsm/controls/DragControls.js

@@ -12,10 +12,16 @@ const _raycaster = new Raycaster();
 
 const _pointer = new Vector2();
 const _offset = new Vector3();
+const _diff = new Vector2();
+const _start = new Vector2();
+const _end = new Vector2();
 const _intersection = new Vector3();
 const _worldPosition = new Vector3();
 const _inverseMatrix = new Matrix4();
 
+const _up = new Vector3();
+const _right = new Vector3();
+
 class DragControls extends EventDispatcher {
 
 	constructor( _objects, _camera, _domElement ) {
@@ -28,6 +34,10 @@ class DragControls extends EventDispatcher {
 
 		const _intersections = [];
 
+		this.mode = 'translate';
+
+		this.rotateSpeed = 1;
+
 		//
 
 		const scope = this;
@@ -75,14 +85,27 @@ class DragControls extends EventDispatcher {
 			if ( scope.enabled === false ) return;
 
 			updatePointer( event );
+			_end.copy( _pointer );
+			_diff.subVectors( _end, _start );
+			_start.copy( _end );
 
 			_raycaster.setFromCamera( _pointer, _camera );
 
 			if ( _selected ) {
 
-				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+				if ( scope.mode === 'translate' ) {
+
+					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+						_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+					}
+
+				} else if ( scope.mode === 'rotate' ) {
 
-					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+					_diff.multiplyScalar( scope.rotateSpeed );
+					_selected.rotateOnWorldAxis( _up, _diff.x );
+					_selected.rotateOnWorldAxis( _right.normalize(), - _diff.y );
 
 				}
 
@@ -161,8 +184,18 @@ class DragControls extends EventDispatcher {
 
 				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
-					_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
-					_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+					if ( scope.mode === 'translate' ) {
+
+						_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
+						_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
+
+					} else if ( scope.mode === 'rotate' ) {
+
+						// the controls only support Y+ up
+						_up.set( 0, 1, 0 ).applyQuaternion( _camera.quaternion ).normalize();
+						_right.set( 1, 0, 0 ).applyQuaternion( _camera.quaternion ).normalize();
+
+					}
 
 				}
 

examples/misc_controls_drag.html

@@ -20,6 +20,7 @@
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - drag controls<br />
 			Use "Shift+Click" to add/remove objects to/from a group.<br />
+			Use "M" to toggle between rotate and translate mode.<br />
 			Grouped objects can be transformed as a union.
 		</div>
 
@@ -113,6 +114,7 @@
 				container.appendChild( renderer.domElement );
 
 				controls = new DragControls( [ ... objects ], camera, renderer.domElement );
+				controls.rotateSpeed = 2;
 				controls.addEventListener( 'drag', render );
 
 				//
@@ -141,6 +143,12 @@
 			function onKeyDown( event ) {
 
 				enableSelection = ( event.keyCode === 16 ) ? true : false;
+
+				if ( event.keyCode === 77 ) {
+
+					controls.mode = ( controls.mode === 'translate' ) ? 'rotate' : 'translate';
+
+				}
 
 			}