From 8673cc801c8887ac143b6dc4535c712ff7bf4af4 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 22 Aug 2013 18:12:12 -0700 Subject: [PATCH] Fixed OrbitControls domElement.body dependency. Also some code clean up. --- examples/js/controls/OrbitControls.js | 58 ++++++++++++++++----------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/examples/js/controls/OrbitControls.js b/examples/js/controls/OrbitControls.js index e55e619161..586818494f 100644 --- a/examples/js/controls/OrbitControls.js +++ b/examples/js/controls/OrbitControls.js @@ -154,8 +154,10 @@ THREE.OrbitControls = function ( object, domElement ) { // right and down are positive this.pan = function ( delta ) { - if ( scope.object.fov !== undefined ) - { + var element = scope.domElement === document ? scope.domElement.body : scope.domElement; + + if ( scope.object.fov !== undefined ) { + // perspective var position = scope.object.position; var offset = position.clone().sub( scope.target ); @@ -164,20 +166,22 @@ THREE.OrbitControls = function ( object, domElement ) { // half of the fov is center to top of screen targetDistance *= Math.tan( (scope.object.fov/2) * Math.PI / 180.0 ); // we actually don't use screenWidth, since perspective camera is fixed to screen height - scope.panLeft( 2 * delta.x * targetDistance / scope.domElement.body.clientHeight ); - scope.panUp( 2 * delta.y * targetDistance / scope.domElement.body.clientHeight ); - } - else if ( scope.object.top !== undefined ) - { + scope.panLeft( 2 * delta.x * targetDistance / element.clientHeight ); + scope.panUp( 2 * delta.y * targetDistance / element.clientHeight ); + + } else if ( scope.object.top !== undefined ) { + // orthographic - scope.panLeft( delta.x * (scope.object.right - scope.object.left) / scope.domElement.body.clientWidth ); - scope.panUp( delta.y * (scope.object.top - scope.object.bottom) / scope.domElement.body.clientHeight ); - } - else - { + scope.panLeft( delta.x * (scope.object.right - scope.object.left) / element.clientWidth ); + scope.panUp( delta.y * (scope.object.top - scope.object.bottom) / element.clientHeight ); + + } else { + // camera neither orthographic or perspective - warn user console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); + } + }; this.dollyIn = function ( dollyScale ) { @@ -312,25 +316,29 @@ THREE.OrbitControls = function ( object, domElement ) { function onMouseMove( event ) { - if ( scope.enabled === false ) { return; } + if ( scope.enabled === false ) return; event.preventDefault(); + var element = scope.domElement === document ? scope.domElement.body : scope.domElement; + if ( state === STATE.ROTATE ) { - if ( scope.noRotate === true ) { return; } + + if ( scope.noRotate === true ) return; rotateEnd.set( event.clientX, event.clientY ); rotateDelta.subVectors( rotateEnd, rotateStart ); // rotating across whole screen goes 360 degrees around - scope.rotateLeft( 2 * Math.PI * rotateDelta.x / scope.domElement.body.clientWidth * scope.rotateSpeed ); + scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 - scope.rotateUp( 2 * Math.PI * rotateDelta.y / scope.domElement.body.clientHeight * scope.rotateSpeed ); + scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); } else if ( state === STATE.DOLLY ) { - if ( scope.noZoom === true ) { return; } + + if ( scope.noZoom === true ) return; dollyEnd.set( event.clientX, event.clientY ); dollyDelta.subVectors( dollyEnd, dollyStart ); @@ -348,7 +356,8 @@ THREE.OrbitControls = function ( object, domElement ) { dollyStart.copy( dollyEnd ); } else if ( state === STATE.PAN ) { - if ( scope.noPan === true ) { return; } + + if ( scope.noPan === true ) return; panEnd.set( event.clientX, event.clientY ); panDelta.subVectors( panEnd, panStart ); @@ -361,11 +370,12 @@ THREE.OrbitControls = function ( object, domElement ) { // Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be scope.update(); + } function onMouseUp( /* event */ ) { - if ( scope.enabled === false ) { return; } + if ( scope.enabled === false ) return; // Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be scope.domElement.removeEventListener( 'mousemove', onMouseMove, false ); @@ -377,8 +387,7 @@ THREE.OrbitControls = function ( object, domElement ) { function onMouseWheel( event ) { - if ( scope.enabled === false ) { return; } - if ( scope.noZoom === true ) { return; } + if ( scope.enabled === false || scope.noZoom === true ) return; var delta = 0; @@ -413,6 +422,7 @@ THREE.OrbitControls = function ( object, domElement ) { // pan a pixel - I guess for precise positioning? // Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be var needUpdate = false; + switch ( event.keyCode ) { case scope.keys.UP: @@ -488,6 +498,8 @@ THREE.OrbitControls = function ( object, domElement ) { event.preventDefault(); event.stopPropagation(); + var element = scope.domElement === document ? scope.domElement.body : scope.domElement; + switch ( event.touches.length ) { case 1: // one-fingered touch: rotate @@ -498,9 +510,9 @@ THREE.OrbitControls = function ( object, domElement ) { rotateDelta.subVectors( rotateEnd, rotateStart ); // rotating across whole screen goes 360 degrees around - scope.rotateLeft( 2 * Math.PI * rotateDelta.x / scope.domElement.body.clientWidth * scope.rotateSpeed ); + scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 - scope.rotateUp( 2 * Math.PI * rotateDelta.y / scope.domElement.body.clientHeight * scope.rotateSpeed ); + scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); break; -- GitLab