DragControls: Add rotate mode.

docs/examples/en/controls/DragControls.html

@@ -111,6 +111,11 @@ <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>
+
 		<h2>Methods</h2>
 
 		<p>See the base [page:EventDispatcher] class for common methods.</p>
@@ -146,4 +151,4 @@ <h2>Source</h2>
 			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/DragControls.js examples/jsm/controls/DragControls.js]
 		</p>
 	</body>
-</html>
+</html>

examples/jsm/controls/DragControls.js

@@ -12,10 +12,17 @@ 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 _horizen = new Vector3();
+const _lookAt = new Vector3();
+
 class DragControls extends EventDispatcher {
 
 	constructor( _objects, _camera, _domElement ) {
@@ -28,6 +35,8 @@ class DragControls extends EventDispatcher {
 
 		const _intersections = [];
 
+		this.mode = "translate";
+
 		//
 
 		const scope = this;
@@ -75,17 +84,31 @@ 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 (scope.mode === "translate") {
+
+					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
+
+						_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
+
+					}
+
+				} else if (scope.mode === "rotate") {
 
-				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
-
-					_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
-
+					_diff.multiplyScalar(2); //Just a random scalling factor since it rotated too slow
+					_selected.rotateOnWorldAxis(_up, _diff.x);
+					_selected.rotateOnWorldAxis(_horizen.normalize(), -_diff.y);
+				
 				}
 
+
 				scope.dispatchEvent( { type: 'drag', object: _selected } );
 
 				return;
@@ -161,9 +184,19 @@ 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") {
+
+						_up.set(0,1,0).applyQuaternion(_camera.quaternion).normalize();
+						_horizen.set(1,0,0).applyQuaternion(_camera.quaternion).normalize();
+						_lookAt.set(0,0,-1).applyQuaternion(_camera.quaternion).normalize();
+
+					}
+
 				}
 
 				_domElement.style.cursor = 'move';
@@ -218,4 +251,4 @@ class DragControls extends EventDispatcher {
 
 }
 
-export { DragControls };
+export { DragControls };

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 modes.<br />
 			Grouped objects can be transformed as a union.
 		</div>
 
@@ -141,6 +142,10 @@
 			function onKeyDown( event ) {
 
 				enableSelection = ( event.keyCode === 16 ) ? true : false;
+
+				if (event.keyCode === 77) {
+					controls.mode = (controls.mode === "translate") ? "rotate" : "translate";
+				}
 
 			}
 
@@ -209,4 +214,4 @@
 		</script>
 
 	</body>
-</html>
+</html>