DragControls.js 4.0 KB

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