DragControls.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. ( function () {
  2. const _plane = new THREE.Plane();
  3. const _raycaster = new THREE.Raycaster();
  4. const _pointer = new THREE.Vector2();
  5. const _offset = new THREE.Vector3();
  6. const _intersection = new THREE.Vector3();
  7. const _worldPosition = new THREE.Vector3();
  8. const _inverseMatrix = new THREE.Matrix4();
  9. class DragControls extends THREE.EventDispatcher {
  10. constructor( _objects, _camera, _domElement ) {
  11. super();
  12. _domElement.style.touchAction = 'none'; // disable touch scroll
  13. let _selected = null,
  14. _hovered = null;
  15. const _intersections = []; //
  16. const scope = this;
  17. function activate() {
  18. _domElement.addEventListener( 'pointermove', onPointerMove );
  19. _domElement.addEventListener( 'pointerdown', onPointerDown );
  20. _domElement.addEventListener( 'pointerup', onPointerCancel );
  21. _domElement.addEventListener( 'pointerleave', onPointerCancel );
  22. }
  23. function deactivate() {
  24. _domElement.removeEventListener( 'pointermove', onPointerMove );
  25. _domElement.removeEventListener( 'pointerdown', onPointerDown );
  26. _domElement.removeEventListener( 'pointerup', onPointerCancel );
  27. _domElement.removeEventListener( 'pointerleave', onPointerCancel );
  28. _domElement.style.cursor = '';
  29. }
  30. function dispose() {
  31. deactivate();
  32. }
  33. function getObjects() {
  34. return _objects;
  35. }
  36. function getRaycaster() {
  37. return _raycaster;
  38. }
  39. function onPointerMove( event ) {
  40. if ( scope.enabled === false ) return;
  41. updatePointer( event );
  42. _raycaster.setFromCamera( _pointer, _camera );
  43. if ( _selected ) {
  44. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  45. _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
  46. }
  47. scope.dispatchEvent( {
  48. type: 'drag',
  49. object: _selected
  50. } );
  51. return;
  52. } // hover support
  53. if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
  54. _intersections.length = 0;
  55. _raycaster.setFromCamera( _pointer, _camera );
  56. _raycaster.intersectObjects( _objects, true, _intersections );
  57. if ( _intersections.length > 0 ) {
  58. const object = _intersections[ 0 ].object;
  59. _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
  60. if ( _hovered !== object && _hovered !== null ) {
  61. scope.dispatchEvent( {
  62. type: 'hoveroff',
  63. object: _hovered
  64. } );
  65. _domElement.style.cursor = 'auto';
  66. _hovered = null;
  67. }
  68. if ( _hovered !== object ) {
  69. scope.dispatchEvent( {
  70. type: 'hoveron',
  71. object: object
  72. } );
  73. _domElement.style.cursor = 'pointer';
  74. _hovered = object;
  75. }
  76. } else {
  77. if ( _hovered !== null ) {
  78. scope.dispatchEvent( {
  79. type: 'hoveroff',
  80. object: _hovered
  81. } );
  82. _domElement.style.cursor = 'auto';
  83. _hovered = null;
  84. }
  85. }
  86. }
  87. }
  88. function onPointerDown( event ) {
  89. if ( scope.enabled === false ) return;
  90. updatePointer( event );
  91. _intersections.length = 0;
  92. _raycaster.setFromCamera( _pointer, _camera );
  93. _raycaster.intersectObjects( _objects, true, _intersections );
  94. if ( _intersections.length > 0 ) {
  95. _selected = scope.transformGroup === true ? _objects[ 0 ] : _intersections[ 0 ].object;
  96. _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
  97. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  98. _inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
  99. _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
  100. }
  101. _domElement.style.cursor = 'move';
  102. scope.dispatchEvent( {
  103. type: 'dragstart',
  104. object: _selected
  105. } );
  106. }
  107. }
  108. function onPointerCancel() {
  109. if ( scope.enabled === false ) return;
  110. if ( _selected ) {
  111. scope.dispatchEvent( {
  112. type: 'dragend',
  113. object: _selected
  114. } );
  115. _selected = null;
  116. }
  117. _domElement.style.cursor = _hovered ? 'pointer' : 'auto';
  118. }
  119. function updatePointer( event ) {
  120. const rect = _domElement.getBoundingClientRect();
  121. _pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
  122. _pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
  123. }
  124. activate(); // API
  125. this.enabled = true;
  126. this.transformGroup = false;
  127. this.activate = activate;
  128. this.deactivate = deactivate;
  129. this.dispose = dispose;
  130. this.getObjects = getObjects;
  131. this.getRaycaster = getRaycaster;
  132. }
  133. }
  134. THREE.DragControls = DragControls;
  135. } )();