DragControls: Add mouseButtons

docs/examples/en/controls/DragControls.html

@@ -100,6 +100,18 @@ <h3>[property:Boolean enabled]</h3>
 			Whether or not the controls are enabled.
 		</p>
 
+		<h3>[property:Object mouseButtons]</h3>
+		<p>
+			This object contains references to the mouse actions used by the controls.
+			<code>
+				controls.mouseButtons = {
+					LEFT: THREE.MOUSE.DRAG,
+					MIDDLE: null,
+					RIGHT: THREE.MOUSE.ROTATE
+				}
+			</code>
+		</p>
+
 		<h3>[property:Boolean recursive]</h3>
 		<p>
 			Whether children of draggable objects can be dragged independently from their parent. Default is `true`.
@@ -113,7 +125,7 @@ <h3>[property:Boolean transformGroup]</h3>
 
 		<h3>[property:String mode]</h3>
 		<p>
-			The current transformation mode. Possible values are `translate`, and `rotate`. Default is `translate`.
+			The current transformation mode for pen and touch events. Possible values are `translate`, and `rotate`. Default is `translate`.
 		</p>
 
 		<h3>[property:Float rotateSpeed]</h3>

docs/examples/zh/controls/DragControls.html

@@ -102,14 +102,36 @@ <h3>[property:Boolean enabled]</h3>
 			是否启用控制器。
 		</p>
 
+		<h3>[property:Object mouseButtons]</h3>
+		<p>
+			该对象包含由控件所使用的鼠标操作的引用。 
+			<code>
+				controls.mouseButtons = {
+					LEFT: THREE.MOUSE.DRAG,
+					MIDDLE: null,
+					RIGHT: THREE.MOUSE.ROTATE
+				}
+			</code>
+		</p>
+
+		<h3>[property:Boolean recursive]</h3>
+		<p>
+			可拖动对象的子对象是否可以独立于其父对象进行拖动。默认值为 `true`。
+		</p>
+
 		<h3>[property:Boolean transformGroup]</h3>
 		<p>
 			当[page:DragControls.objects]数组包含一个单个可拖拽的组对象时该选项生效。如果设置为`true`，[name]会转换整个组对象，而不对单个对象做转换。默认值为`false`。
 		</p>
 
 		<h3>[property:String mode]</h3>
 		<p>
-			The current transformation mode. Possible values are `translate`, and `rotate`. Default is `translate`.
+			在 `pen` 或 `touch` 事件中当前的变换模式，该值可以是 `translate` 或 `rotate`。 默认值为 `translate`。
+		</p>
+
+		<h3>[property:Float rotateSpeed]</h3>
+		<p>
+			执行 `rotate` 时的旋转速度。该值越大旋转速度越快。 默认值为 `1`。
 		</p>
 
 		<h2>方法</h2>
@@ -143,7 +165,7 @@ <h3>[method:Raycaster getRaycaster] ()</h3>
 
 		<h3>[method:undefined setObjects] ( [param:Array objects] )</h3>
 		<p>
-			Sets an array of draggable objects by overwriting the existing one.
+			通过覆盖现有数组来设置可拖动对象数组。
 		</p>
 
 		<h2>源代码</h2>

examples/jsm/controls/DragControls.js

@@ -1,6 +1,7 @@
 import {
 	EventDispatcher,
 	Matrix4,
+	MOUSE,
 	Plane,
 	Raycaster,
 	Vector2,
@@ -37,7 +38,15 @@ class DragControls extends EventDispatcher {
 
 		this.rotateSpeed = 1;
 
-		//
+		this.mouseButtons = { LEFT: MOUSE.DRAG, MIDDLE: null, RIGHT: MOUSE.ROTATE };
+
+		const STATE = {
+			NONE: null,
+			DRAG: MOUSE.DRAG,
+			ROTATE: MOUSE.ROTATE,
+		};
+
+		let state = STATE.NONE;
 
 		const scope = this;
 
@@ -85,6 +94,12 @@ class DragControls extends EventDispatcher {
 
 		}
 
+		function isStateInvalid() {
+
+			return ( state === STATE.DRAG || state === STATE.ROTATE ) === false;
+
+		}
+
 		function onPointerMove( event ) {
 
 			if ( scope.enabled === false ) return;
@@ -95,15 +110,15 @@ class DragControls extends EventDispatcher {
 
 			if ( _selected ) {
 
-				if ( scope.mode === 'translate' ) {
+				if ( state === STATE.DRAG ) {
 
 					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
 						_selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
 
 					}
 
-				} else if ( scope.mode === 'rotate' ) {
+				} else if ( state === STATE.ROTATE ) {
 
 					_diff.subVectors( _pointer, _previousPointer ).multiplyScalar( scope.rotateSpeed );
 					_selected.rotateOnWorldAxis( _up, _diff.x );
@@ -175,6 +190,55 @@ class DragControls extends EventDispatcher {
 
 			if ( scope.enabled === false ) return;
 
+			if ( event.pointerType === 'mouse' ) {
+
+				switch ( event.button ) {
+
+					case 0:
+
+						state = scope.mouseButtons.LEFT;
+						break;
+
+					case 1:
+
+						state = scope.mouseButtons.MIDDLE;
+						break;
+
+					case 2:
+
+						state = scope.mouseButtons.RIGHT;
+						break;
+
+					default:
+
+						state = STATE.NONE;
+
+				}
+
+			} else {
+
+				switch ( scope.mode ) {
+
+					case 'translate':
+
+						state = STATE.DRAG;
+						break;
+
+					case 'rotate':
+
+						state = STATE.ROTATE;
+						break;
+
+					default:
+
+						state = STATE.NONE;
+
+				}
+
+			}
+
+			if ( isStateInvalid() ) return;
+
 			updatePointer( event );
 
 			_intersections.length = 0;
@@ -200,12 +264,12 @@ class DragControls extends EventDispatcher {
 
 				if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
-					if ( scope.mode === 'translate' ) {
+					if ( state === STATE.DRAG ) {
 
 						_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
 						_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
 
-					} else if ( scope.mode === 'rotate' ) {
+					} else if ( state === STATE.ROTATE ) {
 
 						// the controls only support Y+ up
 						_up.set( 0, 1, 0 ).applyQuaternion( _camera.quaternion ).normalize();
@@ -229,6 +293,8 @@ class DragControls extends EventDispatcher {
 
 			if ( scope.enabled === false ) return;
 
+			state = STATE.NONE;
+
 			if ( _selected ) {
 
 				scope.dispatchEvent( { type: 'dragend', object: _selected } );

examples/misc_controls_drag.html

@@ -20,7 +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 />
+			Use "M" to toggle between rotate and translate mode (applies to pen and touch events only).<br />
 			Grouped objects can be transformed as a union.
 		</div>
 
@@ -52,6 +52,12 @@
 
 			function init() {
 
+				document.addEventListener( 'contextmenu', ( eve ) => {
+
+					eve.preventDefault();
+
+				} );
+
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -143,7 +149,7 @@
 			function onKeyDown( event ) {
 
 				enableSelection = ( event.keyCode === 16 ) ? true : false;
-				
+
 				if ( event.keyCode === 77 ) {
 
 					controls.mode = ( controls.mode === 'translate' ) ? 'rotate' : 'translate';

src/constants.js

@@ -1,6 +1,6 @@
 export const REVISION = '168dev';
 
-export const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
+export const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2, DRAG: 3 };
 export const TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
 export const CullFaceNone = 0;
 export const CullFaceBack = 1;

test/unit/src/constants.tests.js

@@ -6,7 +6,7 @@ export default QUnit.module( 'Constants', () => {
 
 	QUnit.test( 'default values', ( assert ) => {
 
-		assert.propEqual( Constants.MOUSE, { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 }, 'MOUSE equal { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 }' );
+		assert.propEqual( Constants.MOUSE, { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2, DRAG: 3 }, 'MOUSE equal { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2, DRAG: 3 }' );
 		assert.propEqual( Constants.TOUCH, { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 }, 'TOUCH equal { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 }' );
 
 		assert.equal( Constants.CullFaceNone, 0, 'CullFaceNone equal 0' );