123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410 |
- import {
- Controls,
- Matrix4,
- Plane,
- Raycaster,
- Vector2,
- Vector3,
- MOUSE,
- TOUCH
- } from 'three';
- const _plane = new Plane();
- const _pointer = new Vector2();
- const _offset = new Vector3();
- const _diff = new Vector2();
- const _previousPointer = new Vector2();
- const _intersection = new Vector3();
- const _worldPosition = new Vector3();
- const _inverseMatrix = new Matrix4();
- const _up = new Vector3();
- const _right = new Vector3();
- let _selected = null, _hovered = null;
- const _intersections = [];
- const STATE = {
- NONE: - 1,
- PAN: 0,
- ROTATE: 1
- };
- class DragControls extends Controls {
- constructor( objects, camera, domElement = null ) {
- super( camera, domElement );
- this.objects = objects;
- this.recursive = true;
- this.transformGroup = false;
- this.rotateSpeed = 1;
- this.raycaster = new Raycaster();
- // interaction
- this.mouseButtons = { LEFT: MOUSE.PAN, MIDDLE: MOUSE.PAN, RIGHT: MOUSE.ROTATE };
- this.touches = { ONE: TOUCH.PAN };
- // event listeners
- this._onPointerMove = onPointerMove.bind( this );
- this._onPointerDown = onPointerDown.bind( this );
- this._onPointerCancel = onPointerCancel.bind( this );
- this._onContextMenu = onContextMenu.bind( this );
- //
- if ( domElement !== null ) {
- this.connect();
- }
- }
- connect() {
- this.domElement.addEventListener( 'pointermove', this._onPointerMove );
- this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
- this.domElement.addEventListener( 'pointerup', this._onPointerCancel );
- this.domElement.addEventListener( 'pointerleave', this._onPointerCancel );
- this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
- this.domElement.style.touchAction = 'none'; // disable touch scroll
- }
- disconnect() {
- this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
- this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
- this.domElement.removeEventListener( 'pointerup', this._onPointerCancel );
- this.domElement.removeEventListener( 'pointerleave', this._onPointerCancel );
- this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
- this.domElement.style.touchAction = 'auto';
- this.domElement.style.cursor = '';
- }
- dispose() {
- this.disconnect();
- }
- _updatePointer( event ) {
- const rect = this.domElement.getBoundingClientRect();
- _pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
- _pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
- }
- _updateState( event ) {
- // determine action
- let action;
- if ( event.pointerType === 'touch' ) {
- action = this.touches.ONE;
- } else {
- switch ( event.button ) {
- case 0:
- action = this.mouseButtons.LEFT;
- break;
- case 1:
- action = this.mouseButtons.MIDDLE;
- break;
- case 2:
- action = this.mouseButtons.RIGHT;
- break;
- default:
- action = null;
- }
- }
- // determine state
- switch ( action ) {
- case MOUSE.PAN:
- case TOUCH.PAN:
- this.state = STATE.PAN;
- break;
- case MOUSE.ROTATE:
- case TOUCH.ROTATE:
- this.state = STATE.ROTATE;
- break;
- default:
- this.state = STATE.NONE;
- }
- }
- getRaycaster() {
- console.warn( 'THREE.DragControls: getRaycaster() has been deprecated. Use controls.raycaster instead.' ); // @deprecated r169
- return this.raycaster;
- }
- setObjects( objects ) {
- console.warn( 'THREE.DragControls: setObjects() has been deprecated. Use controls.objects instead.' ); // @deprecated r169
- this.objects = objects;
- }
- getObjects() {
- console.warn( 'THREE.DragControls: getObjects() has been deprecated. Use controls.objects instead.' ); // @deprecated r169
- return this.objects;
- }
- activate() {
- console.warn( 'THREE.DragControls: activate() has been renamed to connect().' ); // @deprecated r169
- this.connect();
- }
- deactivate() {
- console.warn( 'THREE.DragControls: deactivate() has been renamed to disconnect().' ); // @deprecated r169
- this.disconnect();
- }
- set mode( value ) {
- console.warn( 'THREE.DragControls: The .mode property has been removed. Define the type of transformation via the .mouseButtons or .touches properties.' ); // @deprecated r169
- }
- get mode() {
- console.warn( 'THREE.DragControls: The .mode property has been removed. Define the type of transformation via the .mouseButtons or .touches properties.' ); // @deprecated r169
- }
- }
- function onPointerMove( event ) {
- const camera = this.object;
- const domElement = this.domElement;
- const raycaster = this.raycaster;
- if ( this.enabled === false ) return;
- this._updatePointer( event );
- raycaster.setFromCamera( _pointer, camera );
- if ( _selected ) {
- if ( this.state === STATE.PAN ) {
- if ( raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- _selected.position.copy( _intersection.sub( _offset ).applyMatrix4( _inverseMatrix ) );
- }
- } else if ( this.state === STATE.ROTATE ) {
- _diff.subVectors( _pointer, _previousPointer ).multiplyScalar( this.rotateSpeed );
- _selected.rotateOnWorldAxis( _up, _diff.x );
- _selected.rotateOnWorldAxis( _right.normalize(), - _diff.y );
- }
- this.dispatchEvent( { type: 'drag', object: _selected } );
- _previousPointer.copy( _pointer );
- } else {
- // hover support
- if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
- _intersections.length = 0;
- raycaster.setFromCamera( _pointer, camera );
- raycaster.intersectObjects( this.objects, this.recursive, _intersections );
- if ( _intersections.length > 0 ) {
- const object = _intersections[ 0 ].object;
- _plane.setFromNormalAndCoplanarPoint( camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
- if ( _hovered !== object && _hovered !== null ) {
- this.dispatchEvent( { type: 'hoveroff', object: _hovered } );
- domElement.style.cursor = 'auto';
- _hovered = null;
- }
- if ( _hovered !== object ) {
- this.dispatchEvent( { type: 'hoveron', object: object } );
- domElement.style.cursor = 'pointer';
- _hovered = object;
- }
- } else {
- if ( _hovered !== null ) {
- this.dispatchEvent( { type: 'hoveroff', object: _hovered } );
- domElement.style.cursor = 'auto';
- _hovered = null;
- }
- }
- }
- }
- _previousPointer.copy( _pointer );
- }
- function onPointerDown( event ) {
- const camera = this.object;
- const domElement = this.domElement;
- const raycaster = this.raycaster;
- if ( this.enabled === false ) return;
- this._updatePointer( event );
- this._updateState( event );
- _intersections.length = 0;
- raycaster.setFromCamera( _pointer, camera );
- raycaster.intersectObjects( this.objects, this.recursive, _intersections );
- if ( _intersections.length > 0 ) {
- if ( this.transformGroup === true ) {
- // look for the outermost group in the object's upper hierarchy
- _selected = findGroup( _intersections[ 0 ].object );
- } else {
- _selected = _intersections[ 0 ].object;
- }
- _plane.setFromNormalAndCoplanarPoint( camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
- if ( raycaster.ray.intersectPlane( _plane, _intersection ) ) {
- if ( this.state === STATE.PAN ) {
- _inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
- _offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
- } else if ( this.state === STATE.ROTATE ) {
- // the controls only support Y+ up
- _up.set( 0, 1, 0 ).applyQuaternion( camera.quaternion ).normalize();
- _right.set( 1, 0, 0 ).applyQuaternion( camera.quaternion ).normalize();
- }
- }
- domElement.style.cursor = 'move';
- this.dispatchEvent( { type: 'dragstart', object: _selected } );
- }
- _previousPointer.copy( _pointer );
- }
- function onPointerCancel() {
- if ( this.enabled === false ) return;
- if ( _selected ) {
- this.dispatchEvent( { type: 'dragend', object: _selected } );
- _selected = null;
- }
- this.domElement.style.cursor = _hovered ? 'pointer' : 'auto';
- this.state = STATE.NONE;
- }
- function onContextMenu( event ) {
- if ( this.enabled === false ) return;
- event.preventDefault();
- }
- function findGroup( obj, group = null ) {
- if ( obj.isGroup ) group = obj;
- if ( obj.parent === null ) return group;
- return findGroup( obj.parent, group );
- }
- export { DragControls };
|