yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

Home Page:https://yomotsu.github.io/camera-controls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Method to cancel ongoing transitions

Feel2X opened this issue · comments

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

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?

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.

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?

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

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