Skip to content

Commit

Permalink
TrackballControls: Filly migrate to pointer events.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Jun 17, 2021
1 parent 5f16877 commit 3baa8af
Show file tree
Hide file tree
Showing 2 changed files with 242 additions and 126 deletions.
183 changes: 121 additions & 62 deletions examples/js/controls/TrackballControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
TOUCH_ZOOM_PAN: 4
};
this.object = object;
this.domElement = domElement; // API
this.domElement = domElement;
this.domElement.style.touchAction = 'none'; // disable touch scroll
// API

this.enabled = true;
this.screen = {
Expand Down Expand Up @@ -76,7 +78,9 @@
_zoomStart = new THREE.Vector2(),
_zoomEnd = new THREE.Vector2(),
_panStart = new THREE.Vector2(),
_panEnd = new THREE.Vector2(); // for reset
_panEnd = new THREE.Vector2(),
_pointers = [],
_pointerPositions = {}; // for reset


this.target0 = this.target.clone();
Expand Down Expand Up @@ -383,13 +387,23 @@

if ( scope.enabled === false ) return;

switch ( event.pointerType ) {
if ( _pointers.length === 0 ) {

case 'mouse':
case 'pen':
onMouseDown( event );
break;
// TODO touch
scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );

} //


addPointer( event );

if ( event.pointerType === 'touch' ) {

onTouchStart( event );

} else {

onMouseDown( event );

}

Expand All @@ -399,34 +413,50 @@

if ( scope.enabled === false ) return;

switch ( event.pointerType ) {
if ( event.pointerType === 'touch' ) {

case 'mouse':
case 'pen':
onMouseMove( event );
break;
// TODO touch
onTouchMove( event );

} else {

onMouseMove( event );

}

}

function onPointerUp( event ) {

removePointer( event );

if ( _pointers.length === 0 ) {

scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );

} //


if ( scope.enabled === false ) return;

switch ( event.pointerType ) {
if ( event.pointerType === 'touch' ) {

case 'mouse':
case 'pen':
onMouseUp();
break;
// TODO touch
onTouchEnd();

} else {

onMouseUp( event );

}

}

function onPointerCancel( event ) {

removePointer( event );

}

function keydown( event ) {

if ( scope.enabled === false ) return;
Expand Down Expand Up @@ -515,7 +545,6 @@

function onMouseMove( event ) {

if ( scope.enabled === false ) return;
const state = _keyState !== STATE.NONE ? _keyState : _state;

if ( state === STATE.ROTATE && ! scope.noRotate ) {
Expand All @@ -538,15 +567,14 @@

function onMouseUp() {

if ( scope.enabled === false ) return;
_state = STATE.NONE;
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
scope.dispatchEvent( _endEvent );

}

function mousewheel( event ) {
function onMouseWheel( event ) {

if ( scope.enabled === false ) return;
if ( scope.noZoom === true ) return;
Expand Down Expand Up @@ -576,17 +604,16 @@

}

function touchstart( event ) {
function onTouchStart( event ) {

if ( scope.enabled === false ) return;
event.preventDefault();
trackPointer( event );

switch ( event.touches.length ) {
switch ( _pointers.length ) {

case 1:
_state = STATE.TOUCH_ROTATE;

_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );

_movePrev.copy( _moveCurr );

Expand All @@ -595,11 +622,11 @@
default:
// 2 or more
_state = STATE.TOUCH_ZOOM_PAN;
const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
const dx = _pointers[ 0 ].pageX + _pointers[ 1 ].pageX;
const dy = _pointers[ 0 ].pageY + _pointers[ 1 ].pageY;
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
const x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
const y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;

_panStart.copy( getMouseOnScreen( x, y ) );

Expand All @@ -613,27 +640,27 @@

}

function touchmove( event ) {
function onTouchMove( event ) {

if ( scope.enabled === false ) return;
event.preventDefault();
trackPointer( event );

switch ( event.touches.length ) {
switch ( _pointers.length ) {

case 1:
_movePrev.copy( _moveCurr );

_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );

break;

default:
// 2 or more
const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
const position = getSecondPointerPosition( event );
const dx = event.pageX - position.x;
const dy = event.pageY - position.y;
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
const x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
const y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
const x = ( event.pageX + position.x ) / 2;
const y = ( event.pageY + position.y ) / 2;

_panEnd.copy( getMouseOnScreen( x, y ) );

Expand All @@ -643,11 +670,9 @@

}

function touchend( event ) {

if ( scope.enabled === false ) return;
function onTouchEnd( event ) {

switch ( event.touches.length ) {
switch ( _pointers.length ) {

case 0:
_state = STATE.NONE;
Expand All @@ -656,7 +681,7 @@
case 1:
_state = STATE.TOUCH_ROTATE;

_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );

_movePrev.copy( _moveCurr );

Expand All @@ -675,35 +700,69 @@

}

function addPointer( event ) {

_pointers.push( event );

}

function removePointer( event ) {

delete _pointerPositions[ event.pointerId ];

for ( let i = 0; i < _pointers.length; i ++ ) {

if ( _pointers[ i ].pointerId == event.pointerId ) {

_pointers.splice( i, 1 );

return;

}

}

}

function trackPointer( event ) {

let position = _pointerPositions[ event.pointerId ];

if ( position === undefined ) {

position = new THREE.Vector2();
_pointerPositions[ event.pointerId ] = position;

}

position.set( event.pageX, event.pageY );

}

function getSecondPointerPosition( event ) {

const pointer = event.pointerId === _pointers[ 0 ].pointerId ? _pointers[ 1 ] : _pointers[ 0 ];
return _pointerPositions[ pointer.pointerId ];

}

this.dispose = function () {

scope.domElement.removeEventListener( 'contextmenu', contextmenu );
scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
scope.domElement.removeEventListener( 'wheel', mousewheel );
scope.domElement.removeEventListener( 'touchstart', touchstart );
scope.domElement.removeEventListener( 'touchend', touchend );
scope.domElement.removeEventListener( 'touchmove', touchmove );
scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
scope.domElement.removeEventListener( 'wheel', onMouseWheel );
window.removeEventListener( 'keydown', keydown );
window.removeEventListener( 'keyup', keyup );

};

this.domElement.addEventListener( 'contextmenu', contextmenu );
this.domElement.addEventListener( 'pointerdown', onPointerDown );
this.domElement.addEventListener( 'wheel', mousewheel, {
passive: false
} );
this.domElement.addEventListener( 'touchstart', touchstart, {
passive: false
} );
this.domElement.addEventListener( 'touchend', touchend );
this.domElement.addEventListener( 'touchmove', touchmove, {
this.domElement.addEventListener( 'pointercancel', onPointerCancel );
this.domElement.addEventListener( 'wheel', onMouseWheel, {
passive: false
} );
this.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
this.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
window.addEventListener( 'keydown', keydown );
window.addEventListener( 'keyup', keyup );
this.handleResize(); // force an update at start
Expand Down
Loading

0 comments on commit 3baa8af

Please # to comment.