DragControls.js 4.5 KB

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