DragControls.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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 _selected = null, _hovered = null;
  17. //
  18. var scope = this;
  19. function activate() {
  20. _domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
  21. _domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
  22. _domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
  23. }
  24. function deactivate() {
  25. _domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
  26. _domElement.removeEventListener( 'mousedown', onDocumentMouseDown, false );
  27. _domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
  28. }
  29. function dispose() {
  30. deactivate();
  31. }
  32. function onDocumentMouseMove( event ) {
  33. event.preventDefault();
  34. var rect = _domElement.getBoundingClientRect();
  35. _mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
  36. _mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
  37. _raycaster.setFromCamera( _mouse, _camera );
  38. if ( _selected && scope.enabled ) {
  39. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  40. _selected.position.copy( _intersection.sub( _offset ) );
  41. }
  42. scope.dispatchEvent( { type: 'drag', object: _selected } );
  43. return;
  44. }
  45. _raycaster.setFromCamera( _mouse, _camera );
  46. var intersects = _raycaster.intersectObjects( _objects );
  47. if ( intersects.length > 0 ) {
  48. var object = intersects[ 0 ].object;
  49. _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), object.position );
  50. if ( _hovered !== object ) {
  51. scope.dispatchEvent( { type: 'hoveron', object: object } );
  52. _domElement.style.cursor = 'pointer';
  53. _hovered = object;
  54. }
  55. } else {
  56. if ( _hovered !== null ) {
  57. scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
  58. _domElement.style.cursor = 'auto';
  59. _hovered = null;
  60. }
  61. }
  62. }
  63. function onDocumentMouseDown( event ) {
  64. event.preventDefault();
  65. _raycaster.setFromCamera( _mouse, _camera );
  66. var intersects = _raycaster.intersectObjects( _objects );
  67. if ( intersects.length > 0 ) {
  68. _selected = intersects[ 0 ].object;
  69. if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
  70. _offset.copy( _intersection ).sub( _selected.position );
  71. }
  72. _domElement.style.cursor = 'move';
  73. scope.dispatchEvent( { type: 'dragstart', object: _selected } );
  74. }
  75. }
  76. function onDocumentMouseUp( event ) {
  77. event.preventDefault();
  78. if ( _selected ) {
  79. scope.dispatchEvent( { type: 'dragend', object: _selected } );
  80. _selected = null;
  81. }
  82. _domElement.style.cursor = 'auto';
  83. }
  84. activate();
  85. // API
  86. this.enabled = true;
  87. this.activate = activate;
  88. this.deactivate = deactivate;
  89. this.dispose = dispose;
  90. // Backward compatibility
  91. this.setObjects = function () {
  92. console.error( 'THREE.DragControls: setObjects() has been removed.' );
  93. };
  94. this.on = function ( type, listener ) {
  95. console.warn( 'THREE.DragControls: on() has been deprecated. Use addEventListener() instead.' );
  96. scope.addEventListener( type, listener );
  97. };
  98. this.off = function ( type, listener ) {
  99. console.warn( 'THREE.DragControls: off() has been deprecated. Use removeEventListener() instead.' );
  100. scope.removeEventListener( type, listener );
  101. };
  102. this.notify = function ( type ) {
  103. console.error( 'THREE.DragControls: notify() has been deprecated. Use dispatchEvent() instead.' );
  104. scope.dispatchEvent( { type: type } );
  105. };
  106. };
  107. THREE.DragControls.prototype = Object.create( THREE.EventDispatcher.prototype );
  108. THREE.DragControls.prototype.constructor = THREE.DragControls;