From 29fa64b94f675236fc11319cb4039965cbc6ed58 Mon Sep 17 00:00:00 2001 From: Robin Hawkes Date: Tue, 14 Feb 2017 11:43:14 +0000 Subject: [PATCH] Fixed panning using keyboard and added ctrl + mouse for pan --- src/controls/Controls.Orbit.js | 3 --- src/vendor/OrbitControls.js | 46 +++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/controls/Controls.Orbit.js b/src/controls/Controls.Orbit.js index d1ccb44..29658bd 100644 --- a/src/controls/Controls.Orbit.js +++ b/src/controls/Controls.Orbit.js @@ -309,9 +309,6 @@ class Orbit extends EventEmitter { // See: http://stackoverflow.com/a/26188674/997339 this._controls = new OrbitControls(world._engine._camera, world._container); - // Disable keys for now as no events are fired for them anyway - this._controls.keys = false; - // 89 degrees this._controls.maxPolarAngle = 1.5533; diff --git a/src/vendor/OrbitControls.js b/src/vendor/OrbitControls.js index 3cdd817..4adc601 100644 --- a/src/vendor/OrbitControls.js +++ b/src/vendor/OrbitControls.js @@ -76,7 +76,7 @@ var OrbitControls = function ( object, domElement ) { this.enableKeys = true; // The four arrow keys - this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; + this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40, CTRL: 17 }; // Mouse buttons this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; @@ -238,6 +238,7 @@ var OrbitControls = function ( object, domElement ) { document.removeEventListener( 'mouseout', onMouseUp, false ); window.removeEventListener( 'keydown', onKeyDown, false ); + window.removeEventListener( 'keyup', onKeyUp, false ); //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? @@ -255,6 +256,8 @@ var OrbitControls = function ( object, domElement ) { var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 }; + var KEY_STATE = { CTRL : false }; + var state = STATE.NONE; var EPS = 0.000001; @@ -586,23 +589,41 @@ var OrbitControls = function ( object, domElement ) { case scope.keys.UP: pan( 0, scope.keyPanSpeed ); scope.update(); + scope.dispatchEvent( endEvent ); break; case scope.keys.BOTTOM: pan( 0, - scope.keyPanSpeed ); scope.update(); + scope.dispatchEvent( endEvent ); break; case scope.keys.LEFT: pan( scope.keyPanSpeed, 0 ); scope.update(); + scope.dispatchEvent( endEvent ); break; case scope.keys.RIGHT: pan( - scope.keyPanSpeed, 0 ); scope.update(); + scope.dispatchEvent( endEvent ); break; + case scope.keys.CTRL: + KEY_STATE.CTRL = true; + break; + + } + + } + + function handleKeyUp( event ) { + + switch ( event.keyCode ) { + case scope.keys.CTRL: + KEY_STATE.CTRL = false; + break; } } @@ -720,11 +741,19 @@ var OrbitControls = function ( object, domElement ) { if ( event.button === scope.mouseButtons.ORBIT ) { - if ( scope.enableRotate === false ) return; + if (KEY_STATE.CTRL) { + if ( scope.enablePan === false ) return; - handleMouseDownRotate( event ); + handleMouseDownPan( event ); - state = STATE.ROTATE; + state = STATE.PAN; + } else { + if ( scope.enableRotate === false ) return; + + handleMouseDownRotate( event ); + + state = STATE.ROTATE; + } } else if ( event.button === scope.mouseButtons.ZOOM ) { @@ -822,6 +851,14 @@ var OrbitControls = function ( object, domElement ) { } + function onKeyUp( event ) { + + if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return; + + handleKeyUp( event ); + + } + function onTouchStart( event ) { if ( scope.enabled === false ) return; @@ -1103,6 +1140,7 @@ var OrbitControls = function ( object, domElement ) { }); window.addEventListener( 'keydown', onKeyDown, false ); + window.addEventListener( 'keyup', onKeyUp, false ); // Expose controls methods for programmatic control this.panLeft = panLeft;