Last active
April 20, 2021 19:48
-
-
Save Samsy/f8c2a62e41519a404ee8617f88234a7b to your computer and use it in GitHub Desktop.
Orbit control with smoother
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
EventDispatcher, | |
Vector2, | |
Vector3, | |
MOUSE, | |
Quaternion, | |
Spherical, | |
PerspectiveCamera, | |
OrthographicCamera, | |
} from 'three'; | |
/** | |
* @author Samsy / https://samsy.ninja | |
* @author qiao / https://github.com/qiao | |
* @author mrdoob / http://mrdoob.com | |
* @author alteredq / http://alteredqualia.com/ | |
* @author WestLangley / http://github.com/WestLangley | |
* @author erich666 / http://erichaines.com | |
*/ | |
// This set of controls performs orbiting, dollying (zooming), and panning. | |
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). | |
// | |
// Orbit - left mouse / touch: one finger move | |
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish | |
// Pan - right mouse, or arrow keys / touch: three finter swipe | |
const OrbitControls = function ( object, domElement ) { | |
this.object = object; | |
this.domElement = ( domElement !== undefined ) ? domElement : document; | |
// Set to false to disable this control | |
this.enabled = true; | |
// "target" sets the location of focus, where the object orbits around | |
this.target = new Vector3(); | |
this.smoothDistance = false | |
// How far you can dolly in and out ( PerspectiveCamera only ) | |
this.minDistance = 0; | |
this.maxDistance = Infinity; | |
this.smoothMinDistance = 0; | |
this.smoothMaxDistance = Infinity | |
this.smoothDistanceSpeed = 0.1 | |
// How far you can zoom in and out ( OrthographicCamera only ) | |
this.minZoom = 0; | |
this.maxZoom = Infinity; | |
// How far you can orbit vertically, upper and lower limits. | |
// Range is 0 to Math.PI radians. | |
this.minPolarAngle = 0; // radians | |
this.maxPolarAngle = Math.PI; // radians | |
this.isSmoothPolar = false; | |
this.smoothMinPolarAngle = -Infinity; // value from where it start smoothing to the min limit | |
this.smoothMaxPolarAngle = -Infinity; // value from where it start smoothing to the max limit | |
// How far you can orbit horizontally, upper and lower limits. | |
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. | |
this.minAzimuthAngle = - Infinity; // radians | |
this.maxAzimuthAngle = Infinity; // radians | |
// enable the smoother for the horizontalLimit | |
this.isSmoothAzimuth = false; | |
// If set the following must be a sub-interval contained between the min - max / Azimuth angle. | |
this.smoothMinAzimuthAngle = -Infinity; // value from where it start smoothing to the min limit | |
this.smoothMaxAzimuthAngle = -Infinity; // value from where it start smoothing to the max limit | |
// Set to true to enable damping (inertia) | |
// If damping is enabled, you must call controls.update() in your animation loop | |
this.enableDamping = false; | |
this.dampingFactor = 0.25; | |
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility. | |
// Set to false to disable zooming | |
this.enableZoom = true; | |
this.zoomSpeed = 0.2; | |
// Set to false to disable rotating | |
this.enableRotate = true; | |
this.rotateSpeed = 0.5; | |
// Set to false to disable panning | |
this.enablePan = false; | |
this.keyPanSpeed = 7.0; // pixels moved per arrow key push | |
// Set to true to automatically rotate around the target | |
// If auto-rotate is enabled, you must call controls.update() in your animation loop | |
this.autoRotate = false; | |
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 | |
// Set to false to disable use of the keys | |
this.enableKeys = false; | |
// The four arrow keys | |
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; | |
// Mouse buttons | |
this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT }; | |
// for reset | |
this.target0 = this.target.clone(); | |
this.position0 = this.object.position.clone(); | |
this.zoom0 = this.object.zoom; | |
// | |
// public methods | |
// | |
this.getPolarAngle = function () { | |
return spherical.phi; | |
}; | |
this.getAzimuthalAngle = function () { | |
return spherical.theta; | |
}; | |
this.reset = function () { | |
scope.target.copy( scope.target0 ); | |
scope.object.position.copy( scope.position0 ); | |
scope.object.zoom = scope.zoom0; | |
scope.object.updateProjectionMatrix(); | |
scope.dispatchEvent( changeEvent ); | |
scope.update(); | |
state = STATE.NONE; | |
}; | |
this.resetState = function() { | |
state = STATE.NONE; | |
} | |
/** | |
* Manually set the rotation | |
* @param {Number} [rx=0] 0 bottom > 180 up | |
* @param {Number} [ry=0] -180 left > 180 right | |
*/ | |
this.setRotation = function(rx = 0, ry = 0) { | |
var offset = new Vector3(); | |
var position = scope.object.position; | |
offset.copy(scope.object.position).sub(scope.target); | |
var radius = offset.length() * scale; | |
offset.x = radius * Math.sin(rx) * Math.sin(ry); | |
offset.y = radius * Math.cos(rx); | |
offset.z = radius * Math.sin(rx) * Math.cos(ry); | |
// rotate offset back to "camera-up-vector-is-up" space | |
position.copy(scope.target).add(offset); | |
scope.object.lookAt(scope.target); | |
this.update(); | |
} | |
// this method is exposed, but perhaps it would be better if we can make it private... | |
this.update = function() { | |
var offset = new Vector3(); | |
var smoothThetaDiff = 1; | |
var oldSmoothThetaDiff = 1; | |
var smoothPhiDiff = 1; | |
var oldSmoothPhiDiff = 1; | |
var smoothScale = 1; | |
// so camera.up is the orbit axis | |
var quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) ); | |
var quatInverse = quat.clone().inverse(); | |
var lastPosition = new Vector3(); | |
var lastQuaternion = new Quaternion(); | |
return function update () { | |
var position = scope.object.position; | |
offset.copy( position ).sub( scope.target ); | |
// rotate offset to "y-axis-is-up" space | |
offset.applyQuaternion( quat ); | |
// angle from z-axis around y-axis | |
spherical.setFromVector3( offset ); | |
if ( scope.autoRotate && state === STATE.NONE ) { | |
rotateLeft( getAutoRotationAngle() ); | |
} | |
if(scope.isSmoothAzimuth) { | |
oldSmoothThetaDiff = smoothThetaDiff; | |
var value = spherical.theta | |
var min0 = scope.smoothMaxAzimuthAngle; | |
var max0 = scope.maxAzimuthAngle; | |
var diff0 = 1.0 - Math.max(0, Math.min(1, (value-min0)/(max0-min0))); | |
var max1 = scope.smoothMinAzimuthAngle; | |
var min1 = scope.minAzimuthAngle; | |
var diff1 = Math.max(0, Math.min(1, (value-min1)/(max1-min1))); | |
smoothThetaDiff = Math.min(diff0, diff1); | |
smoothThetaDiff = smoothThetaDiff > oldSmoothThetaDiff ? 1.0 : smoothThetaDiff; | |
} | |
if(scope.isSmoothPolar) { | |
oldSmoothPhiDiff = smoothPhiDiff; | |
var value = spherical.phi; | |
var min0 = scope.smoothMaxPolarAngle; | |
var max0 = scope.maxPolarAngle; | |
var diff0 = 1.0 - Math.max(0, Math.min(1, (value-min0)/(max0-min0))); | |
var max1 = scope.smoothMinPolarAngle; | |
var min1 = scope.minPolarAngle; | |
var diff1 = Math.max(0, Math.min(1, (value-min1)/(max1-min1))); | |
smoothPhiDiff = Math.min(diff0, diff1); | |
smoothPhiDiff = smoothPhiDiff > oldSmoothPhiDiff ? 1.0 : smoothPhiDiff; | |
} | |
spherical.theta += sphericalDelta.theta * smoothThetaDiff; | |
spherical.phi += sphericalDelta.phi * smoothPhiDiff; | |
// restrict theta to be between desired limits | |
spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) ); | |
// restrict phi to be between desired limits | |
spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) ); | |
spherical.makeSafe(); | |
var oldSphericalRadius = spherical.radius; | |
smoothScale = scale != 1 ? scale : smoothScale | |
spherical.radius *= scale; | |
if(this.smoothDistance && smoothScale != 0) { | |
var absDist, absoluteDiff, ratio; | |
if(smoothScale < 1){ | |
absoluteDiff = scope.smoothMinDistance - scope.minDistance; | |
absDist = Math.max(spherical.radius - scope.minDistance, 0) | |
ratio = (absDist / absoluteDiff) | |
spherical.radius = oldSphericalRadius - (ratio * scope.zoomSpeed * scope.smoothDistanceSpeed) | |
} | |
else if( smoothScale > 1 ){ | |
absoluteDiff = scope.maxDistance - scope.smoothMaxDistance | |
absDist = Math.max(scope.maxDistance - spherical.radius, 0) | |
ratio = (absDist / absoluteDiff) | |
spherical.radius = oldSphericalRadius + (ratio * scope.zoomSpeed * scope.smoothDistanceSpeed) | |
} | |
} | |
spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) ); | |
// move target to panned location | |
scope.target.add( panOffset ); | |
offset.setFromSpherical( spherical ); | |
// rotate offset back to "camera-up-vector-is-up" space | |
offset.applyQuaternion( quatInverse ); | |
position.copy( scope.target ).add( offset ); | |
scope.object.lookAt( scope.target ); | |
if ( scope.enableDamping === true ) { | |
sphericalDelta.theta *= ( 1 - scope.dampingFactor ); | |
sphericalDelta.phi *= ( 1 - scope.dampingFactor ); | |
} else { | |
sphericalDelta.set( 0, 0, 0 ); | |
} | |
scale = 1; | |
panOffset.set( 0, 0, 0 ); | |
// update condition is: | |
// min(camera displacement, camera rotation in radians)^2 > EPS | |
// using small-angle approximation cos(x/2) = 1 - x^2 / 8 | |
if ( zoomChanged || | |
lastPosition.distanceToSquared( scope.object.position ) > EPS || | |
8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { | |
scope.dispatchEvent( changeEvent ); | |
lastPosition.copy( scope.object.position ); | |
lastQuaternion.copy( scope.object.quaternion ); | |
zoomChanged = false; | |
return true; | |
} | |
return false; | |
}; | |
}(); | |
this.dispose = function() { | |
scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false ); | |
scope.domElement.removeEventListener( 'mousedown', onMouseDown, false ); | |
scope.domElement.removeEventListener( 'wheel', onMouseWheel, false ); | |
scope.domElement.removeEventListener( 'touchstart', onTouchStart, false ); | |
scope.domElement.removeEventListener( 'touchend', onTouchEnd, false ); | |
scope.domElement.removeEventListener( 'touchmove', onTouchMove, false ); | |
document.removeEventListener( 'mousemove', onMouseMove, false ); | |
document.removeEventListener( 'mouseup', onMouseUp, false ); | |
window.removeEventListener( 'keydown', onKeyDown, false ); | |
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? | |
}; | |
// | |
// internals | |
// | |
var scope = this; | |
var changeEvent = { type: 'change' }; | |
var startEvent = { type: 'start' }; | |
var endEvent = { type: 'end' }; | |
var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 }; | |
var state = STATE.NONE; | |
var EPS = 0.000001; | |
// current position in spherical coordinates | |
var spherical = new Spherical(); | |
var sphericalDelta = new Spherical(); | |
var scale = 1; | |
var panOffset = new Vector3(); | |
var zoomChanged = false; | |
var rotateStart = new Vector2(); | |
var rotateEnd = new Vector2(); | |
var rotateDelta = new Vector2(); | |
var panStart = new Vector2(); | |
var panEnd = new Vector2(); | |
var panDelta = new Vector2(); | |
var dollyStart = new Vector2(); | |
var dollyEnd = new Vector2(); | |
var dollyDelta = new Vector2(); | |
function getAutoRotationAngle() { | |
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; | |
} | |
function getZoomScale() { | |
return Math.pow( 0.95, scope.zoomSpeed ); | |
} | |
function rotateLeft( angle ) { | |
sphericalDelta.theta -= angle; | |
} | |
function rotateUp( angle ) { | |
sphericalDelta.phi -= angle; | |
} | |
var panLeft = function() { | |
var v = new Vector3(); | |
return function panLeft( distance, objectMatrix ) { | |
v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix | |
v.multiplyScalar( - distance ); | |
panOffset.add( v ); | |
}; | |
}(); | |
var panUp = function() { | |
var v = new Vector3(); | |
return function panUp( distance, objectMatrix ) { | |
v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix | |
v.multiplyScalar( distance ); | |
panOffset.add( v ); | |
}; | |
}(); | |
// deltaX and deltaY are in pixels; right and down are positive | |
var pan = function() { | |
var offset = new Vector3(); | |
return function pan ( deltaX, deltaY ) { | |
var element = scope.domElement === document ? scope.domElement.body : scope.domElement; | |
if ( scope.object instanceof PerspectiveCamera ) { | |
// perspective | |
var position = scope.object.position; | |
offset.copy( position ).sub( scope.target ); | |
var targetDistance = offset.length(); | |
// 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 | |
panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix ); | |
panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix ); | |
} else if ( scope.object instanceof OrthographicCamera ) { | |
// orthographic | |
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix ); | |
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix ); | |
} else { | |
// camera neither orthographic nor perspective | |
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); | |
scope.enablePan = false; | |
} | |
}; | |
}(); | |
function dollyIn( dollyScale ) { | |
if ( scope.object instanceof PerspectiveCamera ) { | |
scale /= dollyScale; | |
} else if ( scope.object instanceof OrthographicCamera ) { | |
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) ); | |
scope.object.updateProjectionMatrix(); | |
zoomChanged = true; | |
} else { | |
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); | |
scope.enableZoom = false; | |
} | |
} | |
function dollyOut( dollyScale ) { | |
if ( scope.object instanceof PerspectiveCamera ) { | |
scale *= dollyScale; | |
} else if ( scope.object instanceof OrthographicCamera ) { | |
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) ); | |
scope.object.updateProjectionMatrix(); | |
zoomChanged = true; | |
} else { | |
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); | |
scope.enableZoom = false; | |
} | |
} | |
// | |
// event callbacks - update the object state | |
// | |
function handleMouseDownRotate( event ) { | |
//console.log( 'handleMouseDownRotate' ); | |
rotateStart.set( event.clientX, event.clientY ); | |
} | |
function handleMouseDownDolly( event ) { | |
//console.log( 'handleMouseDownDolly' ); | |
dollyStart.set( event.clientX, event.clientY ); | |
} | |
function handleMouseDownPan( event ) { | |
//console.log( 'handleMouseDownPan' ); | |
panStart.set( event.clientX, event.clientY ); | |
} | |
function handleMouseMoveRotate( event ) { | |
//console.log( 'handleMouseMoveRotate' ); | |
rotateEnd.set( event.clientX, event.clientY ); | |
rotateDelta.subVectors( rotateEnd, rotateStart ); | |
var element = scope.domElement === document ? scope.domElement.body : scope.domElement; | |
// rotating across whole screen goes 360 degrees around | |
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 | |
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); | |
rotateStart.copy( rotateEnd ); | |
scope.update(); | |
} | |
function handleMouseMoveDolly( event ) { | |
//console.log( 'handleMouseMoveDolly' ); | |
dollyEnd.set( event.clientX, event.clientY ); | |
dollyDelta.subVectors( dollyEnd, dollyStart ); | |
if ( dollyDelta.y > 0 ) { | |
dollyIn( getZoomScale() ); | |
} else if ( dollyDelta.y < 0 ) { | |
dollyOut( getZoomScale() ); | |
} | |
dollyStart.copy( dollyEnd ); | |
scope.update(); | |
} | |
function handleMouseMovePan( event ) { | |
//console.log( 'handleMouseMovePan' ); | |
panEnd.set( event.clientX, event.clientY ); | |
panDelta.subVectors( panEnd, panStart ); | |
pan( panDelta.x, panDelta.y ); | |
panStart.copy( panEnd ); | |
scope.update(); | |
} | |
function handleMouseUp( event ) { | |
//console.log( 'handleMouseUp' ); | |
} | |
function handleMouseWheel( event ) { | |
//console.log( 'handleMouseWheel' ); | |
if ( event.deltaY < 0 ) { | |
dollyOut( getZoomScale() ); | |
} else if ( event.deltaY > 0 ) { | |
dollyIn( getZoomScale() ); | |
} | |
scope.update(); | |
} | |
function handleKeyDown( event ) { | |
//console.log( 'handleKeyDown' ); | |
switch ( event.keyCode ) { | |
case scope.keys.UP: | |
pan( 0, scope.keyPanSpeed ); | |
scope.update(); | |
break; | |
case scope.keys.BOTTOM: | |
pan( 0, - scope.keyPanSpeed ); | |
scope.update(); | |
break; | |
case scope.keys.LEFT: | |
pan( scope.keyPanSpeed, 0 ); | |
scope.update(); | |
break; | |
case scope.keys.RIGHT: | |
pan( - scope.keyPanSpeed, 0 ); | |
scope.update(); | |
break; | |
} | |
} | |
function handleTouchStartRotate( event ) { | |
//console.log( 'handleTouchStartRotate' ); | |
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); | |
} | |
function handleTouchStartDolly( event ) { | |
//console.log( 'handleTouchStartDolly' ); | |
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; | |
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; | |
var distance = Math.sqrt( dx * dx + dy * dy ); | |
dollyStart.set( 0, distance ); | |
} | |
function handleTouchStartPan( event ) { | |
//console.log( 'handleTouchStartPan' ); | |
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); | |
} | |
function handleTouchMoveRotate( event ) { | |
//console.log( 'handleTouchMoveRotate' ); | |
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); | |
rotateDelta.subVectors( rotateEnd, rotateStart ); | |
var element = scope.domElement === document ? scope.domElement.body : scope.domElement; | |
// rotating across whole screen goes 360 degrees around | |
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 | |
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); | |
rotateStart.copy( rotateEnd ); | |
scope.update(); | |
} | |
function handleTouchMoveDolly( event ) { | |
//console.log( 'handleTouchMoveDolly' ); | |
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; | |
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; | |
var distance = Math.sqrt( dx * dx + dy * dy ); | |
dollyEnd.set( 0, distance ); | |
dollyDelta.subVectors( dollyEnd, dollyStart ); | |
if ( dollyDelta.y > 0 ) { | |
dollyOut( getZoomScale() ); | |
} else if ( dollyDelta.y < 0 ) { | |
dollyIn( getZoomScale() ); | |
} | |
dollyStart.copy( dollyEnd ); | |
scope.update(); | |
} | |
function handleTouchMovePan( event ) { | |
//console.log( 'handleTouchMovePan' ); | |
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); | |
panDelta.subVectors( panEnd, panStart ); | |
pan( panDelta.x, panDelta.y ); | |
panStart.copy( panEnd ); | |
scope.update(); | |
} | |
function handleTouchEnd( event ) { | |
//console.log( 'handleTouchEnd' ); | |
} | |
// | |
// event handlers - FSM: listen for events and reset state | |
// | |
function onMouseDown( event ) { | |
if ( scope.enabled === false ) return; | |
event.preventDefault(); | |
if ( event.button === scope.mouseButtons.ORBIT ) { | |
if ( scope.enableRotate === false ) return; | |
handleMouseDownRotate( event ); | |
state = STATE.ROTATE; | |
} else if ( event.button === scope.mouseButtons.ZOOM ) { | |
if ( scope.enableZoom === false ) return; | |
handleMouseDownDolly( event ); | |
state = STATE.DOLLY; | |
} else if ( event.button === scope.mouseButtons.PAN ) { | |
if ( scope.enablePan === false ) return; | |
handleMouseDownPan( event ); | |
state = STATE.PAN; | |
} | |
if ( state !== STATE.NONE ) { | |
document.addEventListener( 'mousemove', onMouseMove, false ); | |
document.addEventListener( 'mouseup', onMouseUp, false ); | |
scope.dispatchEvent( startEvent ); | |
} | |
} | |
function onMouseMove( event ) { | |
if ( scope.enabled === false ) return; | |
event.preventDefault(); | |
if ( state === STATE.ROTATE ) { | |
if ( scope.enableRotate === false ) return; | |
handleMouseMoveRotate( event ); | |
} else if ( state === STATE.DOLLY ) { | |
if ( scope.enableZoom === false ) return; | |
handleMouseMoveDolly( event ); | |
} else if ( state === STATE.PAN ) { | |
if ( scope.enablePan === false ) return; | |
handleMouseMovePan( event ); | |
} | |
} | |
function onMouseUp( event ) { | |
if ( scope.enabled === false ) return; | |
handleMouseUp( event ); | |
document.removeEventListener( 'mousemove', onMouseMove, false ); | |
document.removeEventListener( 'mouseup', onMouseUp, false ); | |
scope.dispatchEvent( endEvent ); | |
state = STATE.NONE; | |
} | |
function onMouseWheel( event ) { | |
if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return; | |
event.preventDefault(); | |
event.stopPropagation(); | |
handleMouseWheel( event ); | |
scope.dispatchEvent( startEvent ); // not sure why these are here... | |
scope.dispatchEvent( endEvent ); | |
} | |
function onKeyDown( event ) { | |
if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return; | |
handleKeyDown( event ); | |
} | |
function onTouchStart( event ) { | |
if ( scope.enabled === false ) return; | |
switch ( event.touches.length ) { | |
case 1: // one-fingered touch: rotate | |
if ( scope.enableRotate === false ) return; | |
handleTouchStartRotate( event ); | |
state = STATE.TOUCH_ROTATE; | |
break; | |
case 2: // two-fingered touch: dolly | |
if ( scope.enableZoom === false ) return; | |
handleTouchStartDolly( event ); | |
state = STATE.TOUCH_DOLLY; | |
break; | |
case 3: // three-fingered touch: pan | |
if ( scope.enablePan === false ) return; | |
handleTouchStartPan( event ); | |
state = STATE.TOUCH_PAN; | |
break; | |
default: | |
state = STATE.NONE; | |
} | |
if ( state !== STATE.NONE ) { | |
scope.dispatchEvent( startEvent ); | |
} | |
} | |
function onTouchMove( event ) { | |
if ( scope.enabled === false ) return; | |
event.preventDefault(); | |
event.stopPropagation(); | |
switch ( event.touches.length ) { | |
case 1: // one-fingered touch: rotate | |
if ( scope.enableRotate === false ) return; | |
if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?... | |
handleTouchMoveRotate( event ); | |
break; | |
case 2: // two-fingered touch: dolly | |
if ( scope.enableZoom === false ) return; | |
if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?... | |
handleTouchMoveDolly( event ); | |
break; | |
case 3: // three-fingered touch: pan | |
if ( scope.enablePan === false ) return; | |
if ( state !== STATE.TOUCH_PAN ) return; // is this needed?... | |
handleTouchMovePan( event ); | |
break; | |
default: | |
state = STATE.NONE; | |
} | |
} | |
function onTouchEnd( event ) { | |
if ( scope.enabled === false ) return; | |
handleTouchEnd( event ); | |
scope.dispatchEvent( endEvent ); | |
state = STATE.NONE; | |
} | |
function onContextMenu( event ) { | |
event.preventDefault(); | |
} | |
// | |
scope.domElement.addEventListener( 'contextmenu', onContextMenu, false ); | |
scope.domElement.addEventListener( 'mousedown', onMouseDown, false ); | |
scope.domElement.addEventListener( 'wheel', onMouseWheel, false ); | |
scope.domElement.addEventListener( 'touchstart', onTouchStart, false ); | |
scope.domElement.addEventListener( 'touchend', onTouchEnd, false ); | |
scope.domElement.addEventListener( 'touchmove', onTouchMove, false ); | |
window.addEventListener( 'keydown', onKeyDown, false ); | |
// force an update at start | |
this.update(); | |
}; | |
OrbitControls.prototype = Object.create( EventDispatcher.prototype ); | |
OrbitControls.prototype.constructor = OrbitControls; | |
Object.defineProperties( OrbitControls.prototype, { | |
center: { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .center has been renamed to .target' ); | |
return this.target; | |
} | |
}, | |
// backward compatibility | |
noZoom: { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); | |
return ! this.enableZoom; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); | |
this.enableZoom = ! value; | |
} | |
}, | |
noRotate: { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); | |
return ! this.enableRotate; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); | |
this.enableRotate = ! value; | |
} | |
}, | |
noPan: { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); | |
return ! this.enablePan; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); | |
this.enablePan = ! value; | |
} | |
}, | |
noKeys: { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); | |
return ! this.enableKeys; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); | |
this.enableKeys = ! value; | |
} | |
}, | |
staticMoving : { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); | |
return ! this.enableDamping; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); | |
this.enableDamping = ! value; | |
} | |
}, | |
dynamicDampingFactor : { | |
get: function () { | |
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); | |
return this.dampingFactor; | |
}, | |
set: function ( value ) { | |
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); | |
this.dampingFactor = value; | |
} | |
} | |
} ); | |
export default OrbitControls; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment