DragControls.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /*
  2. * @author zz85 / https://github.com/zz85
  3. * @author mrdoob / http://mrdoob.com
  4. * Running this will allow you to drag three.js objects around the screen.
  5. */
  6. THREE.DragControls = function ( _objects, _camera, _domElement ) {
  7. if ( _objects instanceof THREE.Camera ) {
  8. console.warn( 'THREE.DragControls: Constructor now expects ( objects, camera, domElement )' );
  9. var temp = _objects; _objects = _camera; _camera = temp;
  10. }
  11. var _plane = new THREE.Plane();
  12. var _raycaster = new THREE.Raycaster();
  13. var _mouse = new THREE.Vector2();
  14. var _offset = new THREE.Vector3();
  15. var _intersection = new THREE.Vector3();
  16. var _worldPosition = new THREE.Vector3();
  17. var _inverseMatrix = new THREE.Matrix4();
  18. var _selected = null, _hovered = null;
  19. //
  20. var scope = this;
  21. function activate() {
  22. _domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
  23. _domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
  24. _domElement.addEventListener( 'mouseup', onDocumentMouseCancel, false );
  25. _domElement.addEventListener( 'mouseleave', onDocumentMouseCancel, false );
  26. _domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );
  27. _domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
  28. _domElement.addEventListener( 'touchend', onDocumentTouchEnd, false );
  29. }
  30. function deactivate() {
  31. _domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
  32. _domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
  33. _domElement.removeEventListener( 'mouseup', onDocumentMouseCancel, false );
  34. _domElement.removeEventListener( 'mouseleave', onDocumentMouseCancel, false );
  35. _domElement.removeEventListener( 'touchmove', onDocumentTouchMove, false );
  36. _domElement.removeEventListener( 'touchstart', onDocumentTouchStart, false );
  37. _domElement.removeEventListener( 'touchend', onDocumentTouchEnd, false );
  38. }
  39. function dispose() {
  40. deactivate();
  41. }
  42. function onDocumentMouseMove( event ) {
  43. event.preventDefault();
  44. var rect = _domElement.getBoundingClientRect();
  45. _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
  46. _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
  47. _raycaster.setFromCamera( _mouse, _camera );
  48. if ( _selected && scope.enabled ) {
  49. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  50. _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
  51. }
  52. scope.dispatchEvent( { type: 'drag', object: _selected } );
  53. return;
  54. }
  55. _raycaster.setFromCamera( _mouse, _camera );
  56. var intersects = _raycaster.intersectObjects( _objects );
  57. if ( intersects.length > 0 ) {
  58. var object = intersects[ 0 ].object;
  59. _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
  60. if ( _hovered !== object ) {
  61. scope.dispatchEvent( { type: 'hoveron', object: object } );
  62. _domElement.style.cursor = 'pointer';
  63. _hovered = object;
  64. }
  65. } else {
  66. if ( _hovered !== null ) {
  67. scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
  68. _domElement.style.cursor = 'auto';
  69. _hovered = null;
  70. }
  71. }
  72. }
  73. function onDocumentMouseDown( event ) {
  74. event.preventDefault();
  75. _raycaster.setFromCamera( _mouse, _camera );
  76. var intersects = _raycaster.intersectObjects( _objects );
  77. if ( intersects.length > 0 ) {
  78. _selected = intersects[ 0 ].object;
  79. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  80. _inverseMatrix.getInverse( _selected.parent.matrixWorld );
  81. _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
  82. }
  83. _domElement.style.cursor = 'move';
  84. scope.dispatchEvent( { type: 'dragstart', object: _selected } );
  85. }
  86. }
  87. function onDocumentMouseCancel( event ) {
  88. event.preventDefault();
  89. if ( _selected ) {
  90. scope.dispatchEvent( { type: 'dragend', object: _selected } );
  91. _selected = null;
  92. }
  93. _domElement.style.cursor = _hovered ? 'pointer' : 'auto';
  94. }
  95. function onDocumentTouchMove( event ) {
  96. event.preventDefault();
  97. event = event.changedTouches[ 0 ];
  98. var rect = _domElement.getBoundingClientRect();
  99. _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
  100. _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
  101. _raycaster.setFromCamera( _mouse, _camera );
  102. if ( _selected && scope.enabled ) {
  103. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  104. _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
  105. }
  106. scope.dispatchEvent( { type: 'drag', object: _selected } );
  107. return;
  108. }
  109. }
  110. function onDocumentTouchStart( event ) {
  111. event.preventDefault();
  112. event = event.changedTouches[ 0 ];
  113. var rect = _domElement.getBoundingClientRect();
  114. _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
  115. _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
  116. _raycaster.setFromCamera( _mouse, _camera );
  117. var intersects = _raycaster.intersectObjects( _objects );
  118. if ( intersects.length > 0 ) {
  119. _selected = intersects[ 0 ].object;
  120. _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
  121. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  122. _inverseMatrix.getInverse( _selected.parent.matrixWorld );
  123. _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
  124. }
  125. _domElement.style.cursor = 'move';
  126. scope.dispatchEvent( { type: 'dragstart', object: _selected } );
  127. }
  128. }
  129. function onDocumentTouchEnd( event ) {
  130. event.preventDefault();
  131. if ( _selected ) {
  132. scope.dispatchEvent( { type: 'dragend', object: _selected } );
  133. _selected = null;
  134. }
  135. _domElement.style.cursor = 'auto';
  136. }
  137. activate();
  138. // API
  139. this.enabled = true;
  140. this.activate = activate;
  141. this.deactivate = deactivate;
  142. this.dispose = dispose;
  143. // Backward compatibility
  144. this.setObjects = function () {
  145. console.error( 'THREE.DragControls: setObjects() has been removed.' );
  146. };
  147. this.on = function ( type, listener ) {
  148. console.warn( 'THREE.DragControls: on() has been deprecated. Use addEventListener() instead.' );
  149. scope.addEventListener( type, listener );
  150. };
  151. this.off = function ( type, listener ) {
  152. console.warn( 'THREE.DragControls: off() has been deprecated. Use removeEventListener() instead.' );
  153. scope.removeEventListener( type, listener );
  154. };
  155. this.notify = function ( type ) {
  156. console.error( 'THREE.DragControls: notify() has been deprecated. Use dispatchEvent() instead.' );
  157. scope.dispatchEvent( { type: type } );
  158. };
  159. };
  160. THREE.DragControls.prototype = Object.create( THREE.EventDispatcher.prototype );
  161. THREE.DragControls.prototype.constructor = THREE.DragControls;