TrackballControls: Implement Pointer Events.

examples/js/controls/TrackballControls.js

@@ -395,6 +395,54 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	// listeners
 
+	function onPointerDown( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseDown( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
+	function onPointerMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseMove( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
+	function onPointerUp( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseUp( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
 	function keydown( event ) {
 
 		if ( scope.enabled === false ) return;
@@ -431,9 +479,9 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	}
 
-	function mousedown( event ) {
+	var isMouseDown = false;
 
-		if ( scope.enabled === false ) return;
+	function onMouseDown( event ) {
 
 		event.preventDefault();
 		event.stopPropagation();
@@ -480,16 +528,15 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 		}
 
-		scope.domElement.ownerDocument.addEventListener( 'mousemove', mousemove, false );
-		scope.domElement.ownerDocument.addEventListener( 'mouseup', mouseup, false );
-
 		scope.dispatchEvent( startEvent );
 
+		isMouseDown = true;
+
 	}
 
-	function mousemove( event ) {
+	function onMouseMove( event ) {
 
-		if ( scope.enabled === false ) return;
+		if ( isMouseDown === false ) return;
 
 		event.preventDefault();
 		event.stopPropagation();
@@ -513,19 +560,17 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	}
 
-	function mouseup( event ) {
-
-		if ( scope.enabled === false ) return;
+	function onMouseUp( event ) {
 
 		event.preventDefault();
 		event.stopPropagation();
 
 		_state = STATE.NONE;
 
-		scope.domElement.ownerDocument.removeEventListener( 'mousemove', mousemove );
-		scope.domElement.ownerDocument.removeEventListener( 'mouseup', mouseup );
 		scope.dispatchEvent( endEvent );
 
+		isMouseDown = false;
+
 	}
 
 	function mousewheel( event ) {
@@ -654,15 +699,16 @@ THREE.TrackballControls = function ( object, domElement ) {
 	this.dispose = function () {
 
 		scope.domElement.removeEventListener( 'contextmenu', contextmenu, false );
-		scope.domElement.removeEventListener( 'mousedown', mousedown, false );
+
+		scope.domElement.removeEventListener( 'pointerdown', onPointerDown, false );
 		scope.domElement.removeEventListener( 'wheel', mousewheel, false );
 
 		scope.domElement.removeEventListener( 'touchstart', touchstart, false );
 		scope.domElement.removeEventListener( 'touchend', touchend, false );
 		scope.domElement.removeEventListener( 'touchmove', touchmove, false );
 
-		scope.domElement.ownerDocument.removeEventListener( 'mousemove', mousemove, false );
-		scope.domElement.ownerDocument.removeEventListener( 'mouseup', mouseup, false );
+		scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove, false );
+		scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp, false );
 
 		window.removeEventListener( 'keydown', keydown, false );
 		window.removeEventListener( 'keyup', keyup, false );
@@ -670,13 +716,17 @@ THREE.TrackballControls = function ( object, domElement ) {
 	};
 
 	this.domElement.addEventListener( 'contextmenu', contextmenu, false );
-	this.domElement.addEventListener( 'mousedown', mousedown, false );
+
+	this.domElement.addEventListener( 'pointerdown', onPointerDown, false );
 	this.domElement.addEventListener( 'wheel', mousewheel, false );
 
 	this.domElement.addEventListener( 'touchstart', touchstart, false );
 	this.domElement.addEventListener( 'touchend', touchend, false );
 	this.domElement.addEventListener( 'touchmove', touchmove, false );
 
+	this.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove, false );
+	this.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp, false );
+
 	window.addEventListener( 'keydown', keydown, false );
 	window.addEventListener( 'keyup', keyup, false );
 

examples/jsm/controls/TrackballControls.js

@@ -401,6 +401,54 @@ var TrackballControls = function ( object, domElement ) {
 
 	// listeners
 
+	function onPointerDown( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseDown( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
+	function onPointerMove( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseMove( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
+	function onPointerUp( event ) {
+
+		if ( scope.enabled === false ) return;
+
+		switch ( event.pointerType ) {
+
+			case 'mouse':
+				onMouseUp( event );
+				break;
+
+			// TODO touch
+
+		}
+
+	}
+
 	function keydown( event ) {
 
 		if ( scope.enabled === false ) return;
@@ -437,9 +485,9 @@ var TrackballControls = function ( object, domElement ) {
 
 	}
 
-	function mousedown( event ) {
+	var isMouseDown = false;
 
-		if ( scope.enabled === false ) return;
+	function onMouseDown( event ) {
 
 		event.preventDefault();
 		event.stopPropagation();
@@ -486,16 +534,15 @@ var TrackballControls = function ( object, domElement ) {
 
 		}
 
-		scope.domElement.ownerDocument.addEventListener( 'mousemove', mousemove, false );
-		scope.domElement.ownerDocument.addEventListener( 'mouseup', mouseup, false );
-
 		scope.dispatchEvent( startEvent );
 
+		isMouseDown = true;
+
 	}
 
-	function mousemove( event ) {
+	function onMouseMove( event ) {
 
-		if ( scope.enabled === false ) return;
+		if ( isMouseDown === false ) return;
 
 		event.preventDefault();
 		event.stopPropagation();
@@ -519,19 +566,17 @@ var TrackballControls = function ( object, domElement ) {
 
 	}
 
-	function mouseup( event ) {
-
-		if ( scope.enabled === false ) return;
+	function onMouseUp( event ) {
 
 		event.preventDefault();
 		event.stopPropagation();
 
 		_state = STATE.NONE;
 
-		scope.domElement.ownerDocument.removeEventListener( 'mousemove', mousemove );
-		scope.domElement.ownerDocument.removeEventListener( 'mouseup', mouseup );
 		scope.dispatchEvent( endEvent );
 
+		isMouseDown = false;
+
 	}
 
 	function mousewheel( event ) {
@@ -660,15 +705,16 @@ var TrackballControls = function ( object, domElement ) {
 	this.dispose = function () {
 
 		scope.domElement.removeEventListener( 'contextmenu', contextmenu, false );
-		scope.domElement.removeEventListener( 'mousedown', mousedown, false );
+
+		scope.domElement.removeEventListener( 'pointerdown', onPointerDown, false );
 		scope.domElement.removeEventListener( 'wheel', mousewheel, false );
 
 		scope.domElement.removeEventListener( 'touchstart', touchstart, false );
 		scope.domElement.removeEventListener( 'touchend', touchend, false );
 		scope.domElement.removeEventListener( 'touchmove', touchmove, false );
 
-		scope.domElement.ownerDocument.removeEventListener( 'mousemove', mousemove, false );
-		scope.domElement.ownerDocument.removeEventListener( 'mouseup', mouseup, false );
+		scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove, false );
+		scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp, false );
 
 		window.removeEventListener( 'keydown', keydown, false );
 		window.removeEventListener( 'keyup', keyup, false );
@@ -676,13 +722,17 @@ var TrackballControls = function ( object, domElement ) {
 	};
 
 	this.domElement.addEventListener( 'contextmenu', contextmenu, false );
-	this.domElement.addEventListener( 'mousedown', mousedown, false );
+
+	this.domElement.addEventListener( 'pointerdown', onPointerDown, false );
 	this.domElement.addEventListener( 'wheel', mousewheel, false );
 
 	this.domElement.addEventListener( 'touchstart', touchstart, false );
 	this.domElement.addEventListener( 'touchend', touchend, false );
 	this.domElement.addEventListener( 'touchmove', touchmove, false );
 
+	this.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove, false );
+	this.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp, false );
+
 	window.addEventListener( 'keydown', keydown, false );
 	window.addEventListener( 'keyup', keyup, false );