123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327 |
- import {
- EventDispatcher,
- Matrix4,
- Plane,
- Raycaster,
- Vector2,
- Vector3
- } from '../../../build/three.module.js';
- var DragControls = function ( _objects, _camera, _domElement ) {
- var _plane = new Plane();
- var _raycaster = new Raycaster();
- var _mouse = new Vector2();
- var _offset = new Vector3();
- var _intersection = new Vector3();
- var _worldPosition = new Vector3();
- var _inverseMatrix = new Matrix4();
- var _intersections = [];
- var _selected = null, _hovered = null;
- //
- var scope = this;
- function activate() {
- _domElement.addEventListener( 'pointermove', onPointerMove );
- _domElement.addEventListener( 'pointerdown', onPointerDown );
- _domElement.addEventListener( 'pointerup', onPointerCancel );
- _domElement.addEventListener( 'pointerleave', onPointerCancel );
- _domElement.addEventListener( 'touchmove', onTouchMove );
- _domElement.addEventListener( 'touchstart', onTouchStart );
- _domElement.addEventListener( 'touchend', onTouchEnd );
- }
- function deactivate() {
- _domElement.removeEventListener( 'pointermove', onPointerMove );
- _domElement.removeEventListener( 'pointerdown', onPointerDown );
- _domElement.removeEventListener( 'pointerup', onPointerCancel );
- _domElement.removeEventListener( 'pointerleave', onPointerCancel );
- _domElement.removeEventListener( 'touchmove', onTouchMove );
- _domElement.removeEventListener( 'touchstart', onTouchStart );
- _domElement.removeEventListener( 'touchend', onTouchEnd );
- _domElement.style.cursor = '';
- }
- function dispose() {
- deactivate();
- }
- function getObjects() {
- return _objects;
- }
- function onPointerMove( event ) {
- event.preventDefault();
- switch ( event.pointerType ) {
- case 'mouse':
- case 'pen':
- onMouseMove( event );
- break;
- // TODO touch
- }
- }
- function onMouseMove( event ) {
- var rect = _domElement.getBoundingClientRect();
- _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
- _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
- _raycaster.setFromCamera( _mouse, _camera );
- if ( _selected && scope.enabled ) {
- if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
- }
- scope.dispatchEvent( { type: 'drag', object: _selected } );
- return;
- }
- _intersections.length = 0;
- _raycaster.setFromCamera( _mouse, _camera );
- _raycaster.intersectObjects( _objects, true, _intersections );
- if ( _intersections.length > 0 ) {
- var object = _intersections[ 0 ].object;
- _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
- if ( _hovered !== object && _hovered !== null) {
- scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
- _domElement.style.cursor = 'auto';
- _hovered = null;
- }
-
- if ( _hovered !== object ) {
- scope.dispatchEvent( { type: 'hoveron', object: object } );
- _domElement.style.cursor = 'pointer';
- _hovered = object;
- }
- } else {
- if ( _hovered !== null ) {
- scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );
- _domElement.style.cursor = 'auto';
- _hovered = null;
- }
- }
- }
- function onPointerDown( event ) {
- event.preventDefault();
- switch ( event.pointerType ) {
- case 'mouse':
- case 'pen':
- onMouseDown( event );
- break;
- // TODO touch
- }
- }
- function onMouseDown( event ) {
- event.preventDefault();
- _intersections.length = 0;
- _raycaster.setFromCamera( _mouse, _camera );
- _raycaster.intersectObjects( _objects, true, _intersections );
- if ( _intersections.length > 0 ) {
- _selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
- if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- _inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
- _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
- }
- _domElement.style.cursor = 'move';
- scope.dispatchEvent( { type: 'dragstart', object: _selected } );
- }
- }
- function onPointerCancel( event ) {
- event.preventDefault();
- switch ( event.pointerType ) {
- case 'mouse':
- case 'pen':
- onMouseCancel( event );
- break;
- // TODO touch
- }
- }
- function onMouseCancel( event ) {
- event.preventDefault();
- if ( _selected ) {
- scope.dispatchEvent( { type: 'dragend', object: _selected } );
- _selected = null;
- }
- _domElement.style.cursor = _hovered ? 'pointer' : 'auto';
- }
- function onTouchMove( event ) {
- event.preventDefault();
- event = event.changedTouches[ 0 ];
- var rect = _domElement.getBoundingClientRect();
- _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
- _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
- _raycaster.setFromCamera( _mouse, _camera );
- if ( _selected && scope.enabled ) {
- if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
- }
- scope.dispatchEvent( { type: 'drag', object: _selected } );
- return;
- }
- }
- function onTouchStart( event ) {
- event.preventDefault();
- event = event.changedTouches[ 0 ];
- var rect = _domElement.getBoundingClientRect();
- _mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
- _mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
- _intersections.length = 0;
- _raycaster.setFromCamera( _mouse, _camera );
- _raycaster.intersectObjects( _objects, true, _intersections );
- if ( _intersections.length > 0 ) {
- _selected = ( scope.transformGroup === true ) ? _objects[ 0 ] : _intersections[ 0 ].object;
- _plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
- if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- _inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
- _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
- }
- _domElement.style.cursor = 'move';
- scope.dispatchEvent( { type: 'dragstart', object: _selected } );
- }
- }
- function onTouchEnd( event ) {
- event.preventDefault();
- if ( _selected ) {
- scope.dispatchEvent( { type: 'dragend', object: _selected } );
- _selected = null;
- }
- _domElement.style.cursor = 'auto';
- }
- activate();
- // API
- this.enabled = true;
- this.transformGroup = false;
- this.activate = activate;
- this.deactivate = deactivate;
- this.dispose = dispose;
- this.getObjects = getObjects;
- };
- DragControls.prototype = Object.create( EventDispatcher.prototype );
- DragControls.prototype.constructor = DragControls;
- export { DragControls };
|