DragControls.js 6.3 KB

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