hey guys,
i have a quite strange problem with the function:
function onDocumentTouchMove( 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;
}
}
from the drag controls example.
Keep in mind that there is also the function:
function onDocumentMouseMove( event ) {...}
which has more or less the same code for dragging.
In another file i call the “drag” event by:
this._dragControls.addEventListener('drag', () => {
this.dispatch && this.dispatch(setOverlayPopupConfig(false));
});
dispatch is generated within a custom hook with const dispatch = useDispatch(); I need this function to hide a react component while dragging is active.
So here is my problem: I can use this setup on a desktop using my mouse with no problem. I can drag and drop my object and my react comp is hidden. But if i use this setup on a tablet or in the chrome development tools for mobile devices this happens:
- I touch on my object an want to start dragging - OK
- The react comp disappears - OK
- the object is not moving. dragging is not working.
- I have to touch again on the object
- now dragging is working as desired - OK
- when releasing my finger the react comp shows up again - OK
I recognized that the function onDocumentTouchMove(event) is not running anymore after the dispatch().The function onDocumentMouseMove(event) on the other hand is still working.
If I delete the dispatch() function, drag and drop is also working with touch input, like on my desktop.
I hope someone can help me.