├── .gitignore ├── README.md ├── rollup.config.js ├── LICENSE ├── package.json ├── CODE_OF_CONDUCT.md └── src └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Orbit Controls ES6 2 | 3 | Little update to Orbit Controls from three.js to support ES6 modules 4 | 5 | ## Install 6 | `npm i orbit-controls-es6 --save` 7 | 8 | 9 | ## Example 10 | ```js 11 | import OrbitControls from 'orbit-controls-es6'; 12 | 13 | const controls = new OrbitControls(camera, renderer.domElement); 14 | controls.enabled = true; 15 | controls.maxDistance = 1500; 16 | controls.minDistance = 0; 17 | ``` 18 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import babel from 'rollup-plugin-babel' 3 | 4 | export default [ 5 | { 6 | input: 'src/index.js', 7 | external: [ 'three' ], 8 | plugins: [ 9 | babel({ presets: ['@babel/preset-env'], babelrc: false }) 10 | ], 11 | output: [ 12 | { 13 | name: 'orbitControls', 14 | file: pkg.browser, 15 | format: 'umd', 16 | globals: { 17 | 'three': 'three' 18 | } 19 | } 20 | ] 21 | }, 22 | { 23 | input: 'src/index.js', 24 | external: [ 'three' ], 25 | output: [ 26 | { file: pkg.main, format: 'cjs' }, 27 | { file: pkg.module, format: 'es' } 28 | ] 29 | } 30 | ] 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "orbit-controls-es6", 3 | "version": "2.0.1", 4 | "description": "Threejs orbit controls update for ES6", 5 | "main": "build/orbit-controls-es6.cjs.js", 6 | "module": "build/orbit-controls-es6.es6.js", 7 | "browser": "build/orbit-controls-es6.umd.js", 8 | "scripts": { 9 | "lint": "standard ./src --fix", 10 | "prebuild": "yarn lint", 11 | "build": "rollup -c" 12 | }, 13 | "author": "Silvio Paganini | s2paganini.com", 14 | "license": "Unlicense", 15 | "contributors": [ 16 | { 17 | "name": "qiao / https://github.com/qiao" 18 | }, 19 | { 20 | "name": "mrdoob / http://mrdoob.com" 21 | }, 22 | { 23 | "name": "alteredq / http://alteredqualia.com/" 24 | }, 25 | { 26 | "name": "WestLangley / http://github.com/WestLangley" 27 | }, 28 | { 29 | "name": "erich666 / http://erichaines.com" 30 | } 31 | ], 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/silviopaganini/orbit-controls-es6.git" 35 | }, 36 | "peerDependencies": { 37 | "three": "0.108.0" 38 | }, 39 | "standard": { 40 | "ignore": [ 41 | "/build/*" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@babel/core": "7.1.2", 46 | "@babel/preset-env": "^7.1.0", 47 | "rollup": "0.66.4", 48 | "rollup-plugin-babel": "^4.0.3", 49 | "standard": "12.0.1" 50 | }, 51 | "babel": { 52 | "presets": [ 53 | "env" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at silvio@fluuu.id. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { Vector3, MOUSE, Quaternion, Spherical, Vector2, EventDispatcher } from 'three'; 2 | 3 | /** 4 | * @author qiao / https://github.com/qiao 5 | * @author mrdoob / http://mrdoob.com 6 | * @author alteredq / http://alteredqualia.com/ 7 | * @author WestLangley / http://github.com/WestLangley 8 | * @author erich666 / http://erichaines.com 9 | */ 10 | 11 | class OrbitControls extends EventDispatcher { 12 | constructor (object, domElement) { 13 | super(); 14 | 15 | this.object = object; 16 | 17 | this.domElement = (domElement !== undefined) ? domElement : document; 18 | 19 | // Set to false to disable this control 20 | this.enabled = true; 21 | 22 | // "target" sets the location of focus, where the object orbits around 23 | this.target = new Vector3(); 24 | 25 | // How far you can dolly in and out ( PerspectiveCamera only ) 26 | this.minDistance = 0; 27 | this.maxDistance = Infinity; 28 | 29 | // How far you can zoom in and out ( OrthographicCamera only ) 30 | this.minZoom = 0; 31 | this.maxZoom = Infinity; 32 | 33 | // How far you can orbit vertically, upper and lower limits. 34 | // Range is 0 to Math.PI radians. 35 | this.minPolarAngle = 0; // radians 36 | this.maxPolarAngle = Math.PI; // radians 37 | 38 | // How far you can orbit horizontally, upper and lower limits. 39 | // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. 40 | this.minAzimuthAngle = -Infinity; // radians 41 | this.maxAzimuthAngle = Infinity; // radians 42 | 43 | // Set to true to enable damping (inertia) 44 | // If damping is enabled, you must call controls.update() in your animation loop 45 | this.enableDamping = false; 46 | this.dampingFactor = 0.25; 47 | 48 | // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. 49 | // Set to false to disable zooming 50 | this.enableZoom = true; 51 | this.zoomSpeed = 1.0; 52 | 53 | // Set to false to disable rotating 54 | this.enableRotate = true; 55 | this.rotateSpeed = 1.0; 56 | 57 | // Set to false to disable panning 58 | this.enablePan = true; 59 | this.keyPanSpeed = 7.0; // pixels moved per arrow key push 60 | 61 | // Set to true to automatically rotate around the target 62 | // If auto-rotate is enabled, you must call controls.update() in your animation loop 63 | this.autoRotate = false; 64 | this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 65 | 66 | // Set to false to disable use of the keys 67 | this.enableKeys = true; 68 | 69 | // The four arrow keys 70 | this.keys = { 71 | LEFT: 37, 72 | UP: 38, 73 | RIGHT: 39, 74 | BOTTOM: 40 75 | }; 76 | 77 | // Mouse buttons 78 | this.mouseButtons = { 79 | ORBIT: MOUSE.LEFT, 80 | ZOOM: MOUSE.MIDDLE, 81 | PAN: MOUSE.RIGHT 82 | }; 83 | 84 | // for reset 85 | this.target0 = this.target.clone(); 86 | this.position0 = this.object.position.clone(); 87 | this.zoom0 = this.object.zoom; 88 | 89 | // 90 | // public methods 91 | // 92 | 93 | this.getPolarAngle = () => spherical.phi; 94 | 95 | this.getAzimuthalAngle = () => spherical.theta; 96 | 97 | this.reset = function () { 98 | scope.target.copy(scope.target0); 99 | scope.object.position.copy(scope.position0); 100 | scope.object.zoom = scope.zoom0; 101 | 102 | scope.object.updateProjectionMatrix(); 103 | scope.dispatchEvent(changeEvent); 104 | 105 | scope.update(); 106 | 107 | state = STATE.NONE; 108 | }; 109 | 110 | // this method is exposed, but perhaps it would be better if we can make it private... 111 | this.update = (function () { 112 | var offset = new Vector3(); 113 | 114 | // so camera.up is the orbit axis 115 | var quat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0)); 116 | var quatInverse = quat.clone().inverse(); 117 | 118 | var lastPosition = new Vector3(); 119 | var lastQuaternion = new Quaternion(); 120 | 121 | return function update () { 122 | var position = scope.object.position; 123 | 124 | offset.copy(position).sub(scope.target); 125 | 126 | // rotate offset to "y-axis-is-up" space 127 | offset.applyQuaternion(quat); 128 | 129 | // angle from z-axis around y-axis 130 | spherical.setFromVector3(offset); 131 | 132 | if (scope.autoRotate && state === STATE.NONE) { 133 | rotateLeft(getAutoRotationAngle()); 134 | } 135 | 136 | spherical.theta += sphericalDelta.theta; 137 | spherical.phi += sphericalDelta.phi; 138 | 139 | // restrict theta to be between desired limits 140 | spherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta)); 141 | 142 | // restrict phi to be between desired limits 143 | spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi)); 144 | 145 | spherical.makeSafe(); 146 | 147 | spherical.radius *= scale; 148 | 149 | // restrict radius to be between desired limits 150 | spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius)); 151 | 152 | // move target to panned location 153 | scope.target.add(panOffset); 154 | 155 | offset.setFromSpherical(spherical); 156 | 157 | // rotate offset back to "camera-up-vector-is-up" space 158 | offset.applyQuaternion(quatInverse); 159 | 160 | position.copy(scope.target).add(offset); 161 | 162 | scope.object.lookAt(scope.target); 163 | 164 | if (scope.enableDamping === true) { 165 | sphericalDelta.theta *= (1 - scope.dampingFactor); 166 | sphericalDelta.phi *= (1 - scope.dampingFactor); 167 | } else { 168 | sphericalDelta.set(0, 0, 0); 169 | } 170 | 171 | scale = 1; 172 | panOffset.set(0, 0, 0); 173 | 174 | // update condition is: 175 | // min(camera displacement, camera rotation in radians)^2 > EPS 176 | // using small-angle approximation cos(x/2) = 1 - x^2 / 8 177 | 178 | if (zoomChanged || 179 | lastPosition.distanceToSquared(scope.object.position) > EPS || 180 | 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) { 181 | scope.dispatchEvent(changeEvent); 182 | 183 | lastPosition.copy(scope.object.position); 184 | lastQuaternion.copy(scope.object.quaternion); 185 | zoomChanged = false; 186 | 187 | return true 188 | } 189 | 190 | return false 191 | } 192 | }()); 193 | 194 | this.dispose = function () { 195 | scope.domElement.removeEventListener('contextmenu', onContextMenu, false); 196 | scope.domElement.removeEventListener('mousedown', onMouseDown, false); 197 | scope.domElement.removeEventListener('wheel', onMouseWheel, false); 198 | 199 | scope.domElement.removeEventListener('touchstart', onTouchStart, false); 200 | scope.domElement.removeEventListener('touchend', onTouchEnd, false); 201 | scope.domElement.removeEventListener('touchmove', onTouchMove, false); 202 | 203 | document.removeEventListener('mousemove', onMouseMove, false); 204 | document.removeEventListener('mouseup', onMouseUp, false); 205 | 206 | window.removeEventListener('keydown', onKeyDown, false); 207 | 208 | // scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? 209 | }; 210 | 211 | // 212 | // internals 213 | // 214 | 215 | var scope = this; 216 | 217 | var changeEvent = { 218 | type: 'change' 219 | }; 220 | var startEvent = { 221 | type: 'start' 222 | }; 223 | var endEvent = { 224 | type: 'end' 225 | }; 226 | 227 | var STATE = { 228 | NONE: -1, 229 | ROTATE: 0, 230 | DOLLY: 1, 231 | PAN: 2, 232 | TOUCH_ROTATE: 3, 233 | TOUCH_DOLLY: 4, 234 | TOUCH_PAN: 5 235 | }; 236 | 237 | var state = STATE.NONE; 238 | 239 | var EPS = 0.000001; 240 | 241 | // current position in spherical coordinates 242 | var spherical = new Spherical(); 243 | var sphericalDelta = new Spherical(); 244 | 245 | var scale = 1; 246 | var panOffset = new Vector3(); 247 | var zoomChanged = false; 248 | 249 | var rotateStart = new Vector2(); 250 | var rotateEnd = new Vector2(); 251 | var rotateDelta = new Vector2(); 252 | 253 | var panStart = new Vector2(); 254 | var panEnd = new Vector2(); 255 | var panDelta = new Vector2(); 256 | 257 | var dollyStart = new Vector2(); 258 | var dollyEnd = new Vector2(); 259 | var dollyDelta = new Vector2(); 260 | 261 | function getAutoRotationAngle () { 262 | return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed 263 | } 264 | 265 | function getZoomScale () { 266 | return Math.pow(0.95, scope.zoomSpeed) 267 | } 268 | 269 | function rotateLeft (angle) { 270 | sphericalDelta.theta -= angle; 271 | } 272 | 273 | function rotateUp (angle) { 274 | sphericalDelta.phi -= angle; 275 | } 276 | 277 | var panLeft = (function () { 278 | var v = new Vector3(); 279 | 280 | return function panLeft (distance, objectMatrix) { 281 | v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix 282 | v.multiplyScalar(-distance); 283 | 284 | panOffset.add(v); 285 | } 286 | }()); 287 | 288 | var panUp = (function () { 289 | var v = new Vector3(); 290 | 291 | return function panUp (distance, objectMatrix) { 292 | v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix 293 | v.multiplyScalar(distance); 294 | 295 | panOffset.add(v); 296 | } 297 | }()); 298 | 299 | // deltaX and deltaY are in pixels; right and down are positive 300 | var pan = (function () { 301 | var offset = new Vector3(); 302 | 303 | return function pan (deltaX, deltaY) { 304 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 305 | 306 | if (Object.getPrototypeOf(scope.object).isPerspectiveCamera) { 307 | // perspective 308 | var position = scope.object.position; 309 | offset.copy(position).sub(scope.target); 310 | var targetDistance = offset.length(); 311 | 312 | // half of the fov is center to top of screen 313 | targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0); 314 | 315 | // we actually don't use screenWidth, since perspective camera is fixed to screen height 316 | panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix); 317 | panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix); 318 | } else if (Object.getPrototypeOf(scope.object).isOrthographicCamera) { 319 | // orthographic 320 | panLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix); 321 | panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix); 322 | } else { 323 | // camera neither orthographic nor perspective 324 | console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.'); 325 | scope.enablePan = false; 326 | } 327 | } 328 | }()); 329 | 330 | function dollyIn (dollyScale) { 331 | if (Object.getPrototypeOf(scope.object).isPerspectiveCamera) { 332 | scale /= dollyScale; 333 | } else if (Object.getPrototypeOf(scope.object).isOrthographicCamera) { 334 | scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale)); 335 | scope.object.updateProjectionMatrix(); 336 | zoomChanged = true; 337 | } else { 338 | console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.'); 339 | scope.enableZoom = false; 340 | } 341 | } 342 | 343 | function dollyOut (dollyScale) { 344 | if (Object.getPrototypeOf(scope.object).isPerspectiveCamera) { 345 | scale *= dollyScale; 346 | } else if (Object.getPrototypeOf(scope.object).isOrthographicCamera) { 347 | scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale)); 348 | scope.object.updateProjectionMatrix(); 349 | zoomChanged = true; 350 | } else { 351 | console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.'); 352 | scope.enableZoom = false; 353 | } 354 | } 355 | 356 | // 357 | // event callbacks - update the object state 358 | // 359 | 360 | function handleMouseDownRotate (event) { 361 | // console.log( 'handleMouseDownRotate' ); 362 | 363 | rotateStart.set(event.clientX, event.clientY); 364 | } 365 | 366 | function handleMouseDownDolly (event) { 367 | // console.log( 'handleMouseDownDolly' ); 368 | 369 | dollyStart.set(event.clientX, event.clientY); 370 | } 371 | 372 | function handleMouseDownPan (event) { 373 | // console.log( 'handleMouseDownPan' ); 374 | 375 | panStart.set(event.clientX, event.clientY); 376 | } 377 | 378 | function handleMouseMoveRotate (event) { 379 | // console.log( 'handleMouseMoveRotate' ); 380 | 381 | rotateEnd.set(event.clientX, event.clientY); 382 | rotateDelta.subVectors(rotateEnd, rotateStart); 383 | 384 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 385 | 386 | // rotating across whole screen goes 360 degrees around 387 | rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed); 388 | 389 | // rotating up and down along whole screen attempts to go 360, but limited to 180 390 | rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed); 391 | 392 | rotateStart.copy(rotateEnd); 393 | 394 | scope.update(); 395 | } 396 | 397 | function handleMouseMoveDolly (event) { 398 | // console.log( 'handleMouseMoveDolly' ); 399 | 400 | dollyEnd.set(event.clientX, event.clientY); 401 | 402 | dollyDelta.subVectors(dollyEnd, dollyStart); 403 | 404 | if (dollyDelta.y > 0) { 405 | dollyIn(getZoomScale()); 406 | } else if (dollyDelta.y < 0) { 407 | dollyOut(getZoomScale()); 408 | } 409 | 410 | dollyStart.copy(dollyEnd); 411 | 412 | scope.update(); 413 | } 414 | 415 | function handleMouseMovePan (event) { 416 | // console.log( 'handleMouseMovePan' ); 417 | 418 | panEnd.set(event.clientX, event.clientY); 419 | 420 | panDelta.subVectors(panEnd, panStart); 421 | 422 | pan(panDelta.x, panDelta.y); 423 | 424 | panStart.copy(panEnd); 425 | 426 | scope.update(); 427 | } 428 | 429 | function handleMouseWheel (event) { 430 | // console.log( 'handleMouseWheel' ); 431 | 432 | if (event.deltaY < 0) { 433 | dollyOut(getZoomScale()); 434 | } else if (event.deltaY > 0) { 435 | dollyIn(getZoomScale()); 436 | } 437 | 438 | scope.update(); 439 | } 440 | 441 | function handleKeyDown (event) { 442 | // console.log( 'handleKeyDown' ); 443 | 444 | switch (event.keyCode) { 445 | case scope.keys.UP: 446 | pan(0, scope.keyPanSpeed); 447 | scope.update(); 448 | break 449 | 450 | case scope.keys.BOTTOM: 451 | pan(0, -scope.keyPanSpeed); 452 | scope.update(); 453 | break 454 | 455 | case scope.keys.LEFT: 456 | pan(scope.keyPanSpeed, 0); 457 | scope.update(); 458 | break 459 | 460 | case scope.keys.RIGHT: 461 | pan(-scope.keyPanSpeed, 0); 462 | scope.update(); 463 | break 464 | } 465 | } 466 | 467 | function handleTouchStartRotate (event) { 468 | // console.log( 'handleTouchStartRotate' ); 469 | 470 | rotateStart.set(event.touches[0].pageX, event.touches[0].pageY); 471 | } 472 | 473 | function handleTouchStartDolly (event) { 474 | // console.log( 'handleTouchStartDolly' ); 475 | 476 | var dx = event.touches[0].pageX - event.touches[1].pageX; 477 | var dy = event.touches[0].pageY - event.touches[1].pageY; 478 | 479 | var distance = Math.sqrt(dx * dx + dy * dy); 480 | 481 | dollyStart.set(0, distance); 482 | } 483 | 484 | function handleTouchStartPan (event) { 485 | // console.log( 'handleTouchStartPan' ); 486 | 487 | panStart.set(event.touches[0].pageX, event.touches[0].pageY); 488 | } 489 | 490 | function handleTouchMoveRotate (event) { 491 | // console.log( 'handleTouchMoveRotate' ); 492 | 493 | rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY); 494 | rotateDelta.subVectors(rotateEnd, rotateStart); 495 | 496 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 497 | 498 | // rotating across whole screen goes 360 degrees around 499 | rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed); 500 | 501 | // rotating up and down along whole screen attempts to go 360, but limited to 180 502 | rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed); 503 | 504 | rotateStart.copy(rotateEnd); 505 | 506 | scope.update(); 507 | } 508 | 509 | function handleTouchMoveDolly (event) { 510 | // console.log( 'handleTouchMoveDolly' ); 511 | 512 | var dx = event.touches[0].pageX - event.touches[1].pageX; 513 | var dy = event.touches[0].pageY - event.touches[1].pageY; 514 | 515 | var distance = Math.sqrt(dx * dx + dy * dy); 516 | 517 | dollyEnd.set(0, distance); 518 | 519 | dollyDelta.subVectors(dollyEnd, dollyStart); 520 | 521 | if (dollyDelta.y > 0) { 522 | dollyOut(getZoomScale()); 523 | } else if (dollyDelta.y < 0) { 524 | dollyIn(getZoomScale()); 525 | } 526 | 527 | dollyStart.copy(dollyEnd); 528 | 529 | scope.update(); 530 | } 531 | 532 | function handleTouchMovePan (event) { 533 | // console.log( 'handleTouchMovePan' ); 534 | 535 | panEnd.set(event.touches[0].pageX, event.touches[0].pageY); 536 | 537 | panDelta.subVectors(panEnd, panStart); 538 | 539 | pan(panDelta.x, panDelta.y); 540 | 541 | panStart.copy(panEnd); 542 | 543 | scope.update(); 544 | } 545 | 546 | // 547 | // event handlers - FSM: listen for events and reset state 548 | // 549 | 550 | function onMouseDown (event) { 551 | if (scope.enabled === false) return 552 | 553 | event.preventDefault(); 554 | 555 | if (event.button === scope.mouseButtons.ORBIT) { 556 | if (scope.enableRotate === false) return 557 | 558 | handleMouseDownRotate(event); 559 | 560 | state = STATE.ROTATE; 561 | } else if (event.button === scope.mouseButtons.ZOOM) { 562 | if (scope.enableZoom === false) return 563 | 564 | handleMouseDownDolly(event); 565 | 566 | state = STATE.DOLLY; 567 | } else if (event.button === scope.mouseButtons.PAN) { 568 | if (scope.enablePan === false) return 569 | 570 | handleMouseDownPan(event); 571 | 572 | state = STATE.PAN; 573 | } 574 | 575 | if (state !== STATE.NONE) { 576 | document.addEventListener('mousemove', onMouseMove, false); 577 | document.addEventListener('mouseup', onMouseUp, false); 578 | 579 | scope.dispatchEvent(startEvent); 580 | } 581 | } 582 | 583 | function onMouseMove (event) { 584 | if (scope.enabled === false) return 585 | 586 | event.preventDefault(); 587 | 588 | if (state === STATE.ROTATE) { 589 | if (scope.enableRotate === false) return 590 | 591 | handleMouseMoveRotate(event); 592 | } else if (state === STATE.DOLLY) { 593 | if (scope.enableZoom === false) return 594 | 595 | handleMouseMoveDolly(event); 596 | } else if (state === STATE.PAN) { 597 | if (scope.enablePan === false) return 598 | 599 | handleMouseMovePan(event); 600 | } 601 | } 602 | 603 | function onMouseUp (event) { 604 | if (scope.enabled === false) return 605 | 606 | document.removeEventListener('mousemove', onMouseMove, false); 607 | document.removeEventListener('mouseup', onMouseUp, false); 608 | 609 | scope.dispatchEvent(endEvent); 610 | 611 | state = STATE.NONE; 612 | } 613 | 614 | function onMouseWheel (event) { 615 | if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.ROTATE)) return 616 | 617 | event.preventDefault(); 618 | event.stopPropagation(); 619 | 620 | handleMouseWheel(event); 621 | 622 | scope.dispatchEvent(startEvent); // not sure why these are here... 623 | scope.dispatchEvent(endEvent); 624 | } 625 | 626 | function onKeyDown (event) { 627 | if (scope.enabled === false || scope.enableKeys === false || scope.enablePan === false) return 628 | 629 | handleKeyDown(event); 630 | } 631 | 632 | function onTouchStart (event) { 633 | if (scope.enabled === false) return 634 | 635 | switch (event.touches.length) { 636 | case 1: // one-fingered touch: rotate 637 | 638 | if (scope.enableRotate === false) return 639 | 640 | handleTouchStartRotate(event); 641 | 642 | state = STATE.TOUCH_ROTATE; 643 | 644 | break 645 | 646 | case 2: // two-fingered touch: dolly 647 | 648 | if (scope.enableZoom === false) return 649 | 650 | handleTouchStartDolly(event); 651 | 652 | state = STATE.TOUCH_DOLLY; 653 | 654 | break 655 | 656 | case 3: // three-fingered touch: pan 657 | 658 | if (scope.enablePan === false) return 659 | 660 | handleTouchStartPan(event); 661 | 662 | state = STATE.TOUCH_PAN; 663 | 664 | break 665 | 666 | default: 667 | 668 | state = STATE.NONE; 669 | } 670 | 671 | if (state !== STATE.NONE) { 672 | scope.dispatchEvent(startEvent); 673 | } 674 | } 675 | 676 | function onTouchMove (event) { 677 | if (scope.enabled === false) return 678 | 679 | event.preventDefault(); 680 | event.stopPropagation(); 681 | 682 | switch (event.touches.length) { 683 | case 1: // one-fingered touch: rotate 684 | 685 | if (scope.enableRotate === false) return 686 | if (state !== STATE.TOUCH_ROTATE) return // is this needed?... 687 | 688 | handleTouchMoveRotate(event); 689 | 690 | break 691 | 692 | case 2: // two-fingered touch: dolly 693 | 694 | if (scope.enableZoom === false) return 695 | if (state !== STATE.TOUCH_DOLLY) return // is this needed?... 696 | 697 | handleTouchMoveDolly(event); 698 | 699 | break 700 | 701 | case 3: // three-fingered touch: pan 702 | 703 | if (scope.enablePan === false) return 704 | if (state !== STATE.TOUCH_PAN) return // is this needed?... 705 | 706 | handleTouchMovePan(event); 707 | 708 | break 709 | 710 | default: 711 | 712 | state = STATE.NONE; 713 | } 714 | } 715 | 716 | function onTouchEnd (event) { 717 | if (scope.enabled === false) return 718 | 719 | scope.dispatchEvent(endEvent); 720 | 721 | state = STATE.NONE; 722 | } 723 | 724 | function onContextMenu (event) { 725 | event.preventDefault(); 726 | } 727 | 728 | // 729 | 730 | scope.domElement.addEventListener('contextmenu', onContextMenu, false); 731 | 732 | scope.domElement.addEventListener('mousedown', onMouseDown, false); 733 | scope.domElement.addEventListener('wheel', onMouseWheel, false); 734 | 735 | scope.domElement.addEventListener('touchstart', onTouchStart, false); 736 | scope.domElement.addEventListener('touchend', onTouchEnd, false); 737 | scope.domElement.addEventListener('touchmove', onTouchMove, false); 738 | 739 | window.addEventListener('keydown', onKeyDown, false); 740 | 741 | // force an update at start 742 | 743 | this.update(); 744 | }; 745 | 746 | get center () { 747 | console.warn('OrbitControls: .center has been renamed to .target'); 748 | return this.target 749 | } 750 | 751 | // backward compatibility 752 | 753 | get noZoom () { 754 | console.warn('OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.'); 755 | return !this.enableZoom 756 | } 757 | 758 | set noZoom (value) { 759 | console.warn('OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.'); 760 | this.enableZoom = !value; 761 | } 762 | 763 | get noRotate () { 764 | console.warn('OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.'); 765 | return !this.enableRotate 766 | } 767 | 768 | set noRotate (value) { 769 | console.warn('OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.'); 770 | this.enableRotate = !value; 771 | } 772 | 773 | get noPan () { 774 | console.warn('OrbitControls: .noPan has been deprecated. Use .enablePan instead.'); 775 | return !this.enablePan 776 | } 777 | 778 | set noPan (value) { 779 | console.warn('OrbitControls: .noPan has been deprecated. Use .enablePan instead.'); 780 | this.enablePan = !value; 781 | } 782 | 783 | get noKeys () { 784 | console.warn('OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.'); 785 | return !this.enableKeys 786 | } 787 | 788 | set noKeys (value) { 789 | console.warn('OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.'); 790 | this.enableKeys = !value; 791 | } 792 | 793 | get staticMoving () { 794 | console.warn('OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.'); 795 | return !this.enableDamping 796 | } 797 | 798 | set staticMoving (value) { 799 | console.warn('OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.'); 800 | this.enableDamping = !value; 801 | } 802 | 803 | get dynamicDampingFactor () { 804 | console.warn('OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.'); 805 | return this.dampingFactor 806 | } 807 | 808 | set dynamicDampingFactor (value) { 809 | console.warn('OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.'); 810 | this.dampingFactor = value; 811 | } 812 | } 813 | 814 | export default OrbitControls; 815 | --------------------------------------------------------------------------------