Browse Source

fix DragControl not work on mobile

春龙 8 years ago
parent
commit
fc86162827
1 changed files with 20 additions and 3 deletions
  1. 20 3
      examples/js/controls/DragControls.js

+ 20 - 3
examples/js/controls/DragControls.js

@@ -31,6 +31,9 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 		_domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
 		_domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
 		_domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
+                _domElement.addEventListener( 'touchmove', onDocumentMouseMove, false );
+                _domElement.addEventListener( 'touchstart', onDocumentMouseDown, false );
+                _domElement.addEventListener( 'touchend', onDocumentMouseUp, false );
 
 	}
 
@@ -39,6 +42,10 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 		_domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 		_domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
 		_domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
+                _domElement.removeEventListener( 'touchmove', onDocumentMouseMove, false );
+                _domElement.removeEventListener( 'touchstart', onDocumentMouseDown, false );
+                _domElement.removeEventListener( 'touchend', onDocumentMouseUp, false );
+
 
 	}
 
@@ -51,11 +58,12 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 	function onDocumentMouseMove( event ) {
 
 		event.preventDefault();
+                pointer = event.changedTouches ? event.changedTouches[0] : event;
 
 		var rect = _domElement.getBoundingClientRect();
 
-		_mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
-		_mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
+		_mouse.x = ( (pointer.clientX - rect.left) / rect.width ) * 2 - 1;
+		_mouse.y = - ( (pointer.clientY - rect.top) / rect.height ) * 2 + 1;
 
 		_raycaster.setFromCamera( _mouse, _camera );
 
@@ -66,9 +74,9 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 				_selected.position.copy( _intersection.sub( _offset ) );
 
 			}
-
 			scope.dispatchEvent( { type: 'drag', object: _selected } );
 
+
 			return;
 
 		}
@@ -110,6 +118,12 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 	function onDocumentMouseDown( event ) {
 
 		event.preventDefault();
+                pointer = event.changedTouches ? event.changedTouches[0] : event;
+
+                var rect = _domElement.getBoundingClientRect();
+
+                _mouse.x = ( (pointer.clientX - rect.left) / rect.width ) * 2 - 1;
+                _mouse.y = - ( (pointer.clientY - rect.top) / rect.height ) * 2 + 1;
 
 		_raycaster.setFromCamera( _mouse, _camera );
 
@@ -119,6 +133,8 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 
 			_selected = intersects[ 0 ].object;
 
+                        _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _selected.position );
+
 			if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
 				_offset.copy( _intersection ).sub( _selected.position );
@@ -137,6 +153,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 	function onDocumentMouseUp( event ) {
 
 		event.preventDefault();
+                event = event.changedTouches ? event.changedTouches[0] : event;
 
 		if ( _selected ) {