yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.
https://yomotsu.github.io/camera-controls/
MIT License
1.89k stars 241 forks source link

Method to cancel ongoing transitions #486

Open Feel2X opened 4 months ago

Feel2X commented 4 months ago

Is your feature request related to a problem? Please describe.

Hello there! First of all, thank you so much for your awesome work, this tool is really useful!

In my use case, camera transitions are made towards certain points of interest in a scene if the user clicks on them. When the user clicks on another poi during an ongoing transition, both the currently running transition and the new transition are "fighting" about in what direction the camera should move, which results in weird and unpredictable camera movement.

Describe the solution you'd like

It would be nice to have something like .cancelAllTransitions() which can be called before starting a new set of transitions.

Describe alternatives you've considered

I'm not really sure how to solve that since I'm new with this library. I tried to fire "rest" and "sleep" events manually but that didn't stop the transitions. Also the .cancel() method didn't work for transitions which are not controlled by the user.

Additional context

No response

yomotsu commented 4 months ago

As long as you use the cameraControls method, I don't think the "fighting" will happen, because each method will overwrite the final destination. Would you mind providing a simplified live demo using jsFiddle or similar?

Feel2X commented 4 months ago

Thanks for the quick response!

Unfortunately I can't share any demo or code since I'm not allowed to share, but I'm using await cameraControlsRef.current?.moveTo(targetPosition.x, targetPosition.z, 0, true); in an async function transitionToPoi(poi) in order to move the camera. Each time the selected poi changes (which is handled in react state), this transitionToPoi(poi) function is invoked.

This then results then in the camera e.g. alternating to go slightly towards the first target, then back towards the second target and when it has reached the second target it goes back to the first target.

Feel2X commented 4 months ago

I'm sorry, I just realized that the issue lies in my code and transitions are actually cancelled as they should. I was just calling the transitions in a while loop as long as the offset to the target position is above a certain threshold.

This is a workaround for another issue which I'm facing when using setBoundary together with transitions that should zoom and move at the same time. Here, the move transition stops very early since at the current zoom level the border is already reached while the zoom transition continues until target zoom is reached (where theoretically the move transition could have continued).

Is there a functionality which handles both move and zoom in one function until both target values are achieved?

yomotsu commented 4 months ago

you can call multiple methods at the same time to combine the camera movement.

Feel2X commented 4 months ago

That's what I'm doing yeah, but sometimes the moveTo function doesn't reach the optimum position for the target zoom which is why I'm using the workaround described above. But thank you, I think this works well now