1/** 2 * @author qiao / https://github.com/qiao 3 * @author mrdoob / http://mrdoob.com 4 * @author alteredq / http://alteredqualia.com/ 5 * @author WestLangley / http://github.com/WestLangley 6 * @author erich666 / http://erichaines.com 7 */ 8/*global THREE, console */ 9 10// This set of controls performs orbiting, dollying (zooming), and panning. It maintains 11// the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is 12// supported. 13// 14// Orbit - left mouse / touch: one finger move 15// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish 16// Pan - right mouse, or arrow keys / touch: three finter swipe 17// 18// This is a drop-in replacement for (most) TrackballControls used in examples. 19// That is, include this js file and wherever you see: 20// controls = new THREE.TrackballControls( camera ); 21// controls.target.z = 150; 22// Simple substitute "OrbitControls" and the control should work as-is. 23 24THREE.OrbitControls = function ( object, domElement ) { 25 26 this.object = object; 27 this.domElement = ( domElement !== undefined ) ? domElement : document; 28 29 // API 30 31 // Set to false to disable this control 32 this.enabled = true; 33 34 // "target" sets the location of focus, where the control orbits around 35 // and where it pans with respect to. 36 this.target = new THREE.Vector3(); 37 38 // center is old, deprecated; use "target" instead 39 this.center = this.target; 40 41 // This option actually enables dollying in and out; left as "zoom" for 42 // backwards compatibility 43 this.noZoom = false; 44 this.zoomSpeed = 1.0; 45 46 // Limits to how far you can dolly in and out 47 this.minDistance = 0; 48 this.maxDistance = Infinity; 49 50 // Set to true to disable this control 51 this.noRotate = false; 52 this.rotateSpeed = 1.0; 53 54 // Set to true to disable this control 55 this.noPan = false; 56 this.keyPanSpeed = 7.0; // pixels moved per arrow key push 57 58 // Set to true to automatically rotate around the target 59 this.autoRotate = false; 60 this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 61 62 // How far you can orbit vertically, upper and lower limits. 63 // Range is 0 to Math.PI radians. 64 this.minPolarAngle = 0; // radians 65 this.maxPolarAngle = Math.PI; // radians 66 67 // Set to true to disable use of the keys 68 this.noKeys = false; 69 70 // The four arrow keys 71 this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; 72 73 //////////// 74 // internals 75 76 var scope = this; 77 78 var EPS = 0.000001; 79 80 var rotateStart = new THREE.Vector2(); 81 var rotateEnd = new THREE.Vector2(); 82 var rotateDelta = new THREE.Vector2(); 83 84 var panStart = new THREE.Vector2(); 85 var panEnd = new THREE.Vector2(); 86 var panDelta = new THREE.Vector2(); 87 var panOffset = new THREE.Vector3(); 88 89 var offset = new THREE.Vector3(); 90 91 var dollyStart = new THREE.Vector2(); 92 var dollyEnd = new THREE.Vector2(); 93 var dollyDelta = new THREE.Vector2(); 94 95 var phiDelta = 0; 96 var thetaDelta = 0; 97 var scale = 1; 98 var pan = new THREE.Vector3(); 99 100 var lastPosition = new THREE.Vector3(); 101 102 var STATE = { NONE : -1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 }; 103 104 var state = STATE.NONE; 105 106 // for reset 107 108 this.target0 = this.target.clone(); 109 this.position0 = this.object.position.clone(); 110 111 // events 112 113 var changeEvent = { type: 'change' }; 114 var startEvent = { type: 'start'}; 115 var endEvent = { type: 'end'}; 116 117 this.rotateLeft = function ( angle ) { 118 119 if ( angle === undefined ) { 120 121 angle = getAutoRotationAngle(); 122 123 } 124 125 thetaDelta -= angle; 126 127 }; 128 129 this.rotateUp = function ( angle ) { 130 131 if ( angle === undefined ) { 132 133 angle = getAutoRotationAngle(); 134 135 } 136 137 phiDelta -= angle; 138 139 }; 140 141 // pass in distance in world space to move left 142 this.panLeft = function ( distance ) { 143 144 var te = this.object.matrix.elements; 145 146 // get X column of matrix 147 panOffset.set( te[ 0 ], te[ 1 ], te[ 2 ] ); 148 panOffset.multiplyScalar( - distance ); 149 150 pan.add( panOffset ); 151 152 }; 153 154 // pass in distance in world space to move up 155 this.panUp = function ( distance ) { 156 157 var te = this.object.matrix.elements; 158 159 // get Y column of matrix 160 panOffset.set( te[ 4 ], te[ 5 ], te[ 6 ] ); 161 panOffset.multiplyScalar( distance ); 162 163 pan.add( panOffset ); 164 165 }; 166 167 // pass in x,y of change desired in pixel space, 168 // right and down are positive 169 this.pan = function ( deltaX, deltaY ) { 170 171 var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 172 173 if ( scope.object.fov !== undefined ) { 174 175 // perspective 176 var position = scope.object.position; 177 var offset = position.clone().sub( scope.target ); 178 var targetDistance = offset.length(); 179 180 // half of the fov is center to top of screen 181 targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 ); 182 183 // we actually don't use screenWidth, since perspective camera is fixed to screen height 184 scope.panLeft( 2 * deltaX * targetDistance / element.clientHeight ); 185 scope.panUp( 2 * deltaY * targetDistance / element.clientHeight ); 186 187 } else if ( scope.object.top !== undefined ) { 188 189 // orthographic 190 scope.panLeft( deltaX * (scope.object.right - scope.object.left) / element.clientWidth ); 191 scope.panUp( deltaY * (scope.object.top - scope.object.bottom) / element.clientHeight ); 192 193 } else { 194 195 // camera neither orthographic or perspective 196 console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); 197 198 } 199 200 }; 201 202 this.dollyIn = function ( dollyScale ) { 203 204 if ( dollyScale === undefined ) { 205 206 dollyScale = getZoomScale(); 207 208 } 209 210 scale /= dollyScale; 211 212 }; 213 214 this.dollyOut = function ( dollyScale ) { 215 216 if ( dollyScale === undefined ) { 217 218 dollyScale = getZoomScale(); 219 220 } 221 222 scale *= dollyScale; 223 224 }; 225 226 this.update = function () { 227 228 var position = this.object.position; 229 230 offset.copy( position ).sub( this.target ); 231 232 // angle from z-axis around y-axis 233 234 var theta = Math.atan2( offset.x, offset.z ); 235 236 // angle from y-axis 237 238 var phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y ); 239 240 if ( this.autoRotate ) { 241 242 this.rotateLeft( getAutoRotationAngle() ); 243 244 } 245 246 theta += thetaDelta; 247 phi += phiDelta; 248 249 // restrict phi to be between desired limits 250 phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) ); 251 252 // restrict phi to be betwee EPS and PI-EPS 253 phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) ); 254 255 var radius = offset.length() * scale; 256 257 // restrict radius to be between desired limits 258 radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) ); 259 260 // move target to panned location 261 this.target.add( pan ); 262 263 offset.x = radius * Math.sin( phi ) * Math.sin( theta ); 264 offset.y = radius * Math.cos( phi ); 265 offset.z = radius * Math.sin( phi ) * Math.cos( theta ); 266 267 position.copy( this.target ).add( offset ); 268 269 this.object.lookAt( this.target ); 270 271 thetaDelta = 0; 272 phiDelta = 0; 273 scale = 1; 274 pan.set( 0, 0, 0 ); 275 276 if ( lastPosition.distanceTo( this.object.position ) > 0 ) { 277 278 this.dispatchEvent( changeEvent ); 279 280 lastPosition.copy( this.object.position ); 281 282 } 283 284 }; 285 286 287 this.reset = function () { 288 289 state = STATE.NONE; 290 291 this.target.copy( this.target0 ); 292 //this.object.position.copy( this.position0 ); 293 294 this.update(); 295 296 }; 297 298 function getAutoRotationAngle() { 299 300 return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; 301 302 } 303 304 function getZoomScale() { 305 306 return Math.pow( 0.95, scope.zoomSpeed ); 307 308 } 309 310 function onMouseDown( event ) { 311 312 if ( scope.enabled === false ) return; 313 event.preventDefault(); 314 315 if ( event.button === 0 ) { 316 if ( scope.noRotate === true ) return; 317 318 state = STATE.ROTATE; 319 320 rotateStart.set( event.clientX, event.clientY ); 321 322 } else if ( event.button === 1 ) { 323 if ( scope.noZoom === true ) return; 324 325 state = STATE.DOLLY; 326 327 dollyStart.set( event.clientX, event.clientY ); 328 329 } else if ( event.button === 2 ) { 330 if ( scope.noPan === true ) return; 331 332 state = STATE.PAN; 333 334 panStart.set( event.clientX, event.clientY ); 335 336 } 337 338 scope.domElement.addEventListener( 'mousemove', onMouseMove, false ); 339 scope.domElement.addEventListener( 'mouseup', onMouseUp, false ); 340 scope.dispatchEvent( startEvent ); 341 342 } 343 344 function onMouseMove( event ) { 345 346 if ( scope.enabled === false ) return; 347 348 event.preventDefault(); 349 350 var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 351 352 if ( state === STATE.ROTATE ) { 353 354 if ( scope.noRotate === true ) return; 355 356 rotateEnd.set( event.clientX, event.clientY ); 357 rotateDelta.subVectors( rotateEnd, rotateStart ); 358 359 // rotating across whole screen goes 360 degrees around 360 scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); 361 362 // rotating up and down along whole screen attempts to go 360, but limited to 180 363 scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); 364 365 rotateStart.copy( rotateEnd ); 366 367 } else if ( state === STATE.DOLLY ) { 368 369 if ( scope.noZoom === true ) return; 370 371 dollyEnd.set( event.clientX, event.clientY ); 372 dollyDelta.subVectors( dollyEnd, dollyStart ); 373 374 if ( dollyDelta.y > 0 ) { 375 376 scope.dollyIn(); 377 378 } else { 379 380 scope.dollyOut(); 381 382 } 383 384 dollyStart.copy( dollyEnd ); 385 386 } else if ( state === STATE.PAN ) { 387 388 if ( scope.noPan === true ) return; 389 390 panEnd.set( event.clientX, event.clientY ); 391 panDelta.subVectors( panEnd, panStart ); 392 393 scope.pan( panDelta.x, panDelta.y ); 394 395 panStart.copy( panEnd ); 396 397 } 398 399 scope.update(); 400 401 } 402 403 function onMouseUp( /* event */ ) { 404 405 if ( scope.enabled === false ) return; 406 407 scope.domElement.removeEventListener( 'mousemove', onMouseMove, false ); 408 scope.domElement.removeEventListener( 'mouseup', onMouseUp, false ); 409 scope.dispatchEvent( endEvent ); 410 state = STATE.NONE; 411 412 } 413 414 function onMouseWheel( event ) { 415 416 if ( scope.enabled === false || scope.noZoom === true ) return; 417 418 event.preventDefault(); 419 420 var delta = 0; 421 422 if ( event.wheelDelta !== undefined ) { // WebKit / Opera / Explorer 9 423 424 delta = event.wheelDelta; 425 426 } else if ( event.detail !== undefined ) { // Firefox 427 428 delta = - event.detail; 429 430 } 431 432 if ( delta > 0 ) { 433 434 scope.dollyOut(); 435 436 } else { 437 438 scope.dollyIn(); 439 440 } 441 442 scope.update(); 443 scope.dispatchEvent( startEvent ); 444 scope.dispatchEvent( endEvent ); 445 446 } 447 448 function onKeyDown( event ) { 449 450 if ( scope.enabled === false || scope.noKeys === true || scope.noPan === true ) return; 451 452 switch ( event.keyCode ) { 453 454 case scope.keys.UP: 455 scope.pan( 0, scope.keyPanSpeed ); 456 scope.update(); 457 break; 458 459 case scope.keys.BOTTOM: 460 scope.pan( 0, - scope.keyPanSpeed ); 461 scope.update(); 462 break; 463 464 case scope.keys.LEFT: 465 scope.pan( scope.keyPanSpeed, 0 ); 466 scope.update(); 467 break; 468 469 case scope.keys.RIGHT: 470 scope.pan( - scope.keyPanSpeed, 0 ); 471 scope.update(); 472 break; 473 474 } 475 476 } 477 478 function touchstart( event ) { 479 480 if ( scope.enabled === false ) return; 481 482 switch ( event.touches.length ) { 483 484 case 1: // one-fingered touch: rotate 485 486 if ( scope.noRotate === true ) return; 487 488 state = STATE.TOUCH_ROTATE; 489 490 rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 491 break; 492 493 case 2: // two-fingered touch: dolly 494 495 if ( scope.noZoom === true ) return; 496 497 state = STATE.TOUCH_DOLLY; 498 499 var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; 500 var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; 501 var distance = Math.sqrt( dx * dx + dy * dy ); 502 dollyStart.set( 0, distance ); 503 break; 504 505 case 3: // three-fingered touch: pan 506 507 if ( scope.noPan === true ) return; 508 509 state = STATE.TOUCH_PAN; 510 511 panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 512 break; 513 514 default: 515 516 state = STATE.NONE; 517 518 } 519 520 scope.dispatchEvent( startEvent ); 521 522 } 523 524 function touchmove( event ) { 525 526 if ( scope.enabled === false ) return; 527 528 event.preventDefault(); 529 event.stopPropagation(); 530 531 var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 532 533 switch ( event.touches.length ) { 534 535 case 1: // one-fingered touch: rotate 536 537 if ( scope.noRotate === true ) return; 538 if ( state !== STATE.TOUCH_ROTATE ) return; 539 540 rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 541 rotateDelta.subVectors( rotateEnd, rotateStart ); 542 543 // rotating across whole screen goes 360 degrees around 544 scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); 545 // rotating up and down along whole screen attempts to go 360, but limited to 180 546 scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); 547 548 rotateStart.copy( rotateEnd ); 549 550 scope.update(); 551 break; 552 553 case 2: // two-fingered touch: dolly 554 555 if ( scope.noZoom === true ) return; 556 if ( state !== STATE.TOUCH_DOLLY ) return; 557 558 var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; 559 var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; 560 var distance = Math.sqrt( dx * dx + dy * dy ); 561 562 dollyEnd.set( 0, distance ); 563 dollyDelta.subVectors( dollyEnd, dollyStart ); 564 565 if ( dollyDelta.y > 0 ) { 566 567 scope.dollyOut(); 568 569 } else { 570 571 scope.dollyIn(); 572 573 } 574 575 dollyStart.copy( dollyEnd ); 576 577 scope.update(); 578 break; 579 580 case 3: // three-fingered touch: pan 581 582 if ( scope.noPan === true ) return; 583 if ( state !== STATE.TOUCH_PAN ) return; 584 585 panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); 586 panDelta.subVectors( panEnd, panStart ); 587 588 scope.pan( panDelta.x, panDelta.y ); 589 590 panStart.copy( panEnd ); 591 592 scope.update(); 593 break; 594 595 default: 596 597 state = STATE.NONE; 598 599 } 600 601 } 602 603 function touchend( /* event */ ) { 604 605 if ( scope.enabled === false ) return; 606 607 scope.dispatchEvent( endEvent ); 608 state = STATE.NONE; 609 610 } 611 612 this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false ); 613 this.domElement.addEventListener( 'mousedown', onMouseDown, false ); 614 this.domElement.addEventListener( 'mousewheel', onMouseWheel, false ); 615 this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox 616 617 this.domElement.addEventListener( 'touchstart', touchstart, false ); 618 this.domElement.addEventListener( 'touchend', touchend, false ); 619 this.domElement.addEventListener( 'touchmove', touchmove, false ); 620 621 window.addEventListener( 'keydown', onKeyDown, false ); 622 623}; 624 625THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype ); 626