Automatic camera transitions move twice as fast is a mouse button is down

[leoncvlt]

First of all, thanks for this very useful asset!

You can see the reported behaviour in the fit example: https://yomotsu.github.io/camera-controls/examples/fit-and-padding.html

Zoom out, then press one of the buttons to fit the camera view back to the box, and try clicking the mouse buttons. The transition speed definitely zooms in when a mouse button is held.

I have an app where I select 3D object with the mouse (raycasting) and fit the camera when they are clicked, but this bug causes the motion to be kinda jerky. Any way to fix this?

[yomotsu]

Thanks for your report.

I couldn't reproduce the problem.
Do you mind attaching an animation Gif or video?

[leoncvlt]

Interesting! I have uploaded a video of the issue on imgur: https://imgur.com/a/9yrUGqF

The first time I didn't click the mouse button during the animation and the camera tweens at the intended speed. Then I hold my mouse button during the transition to show the camera speeding up, the third time I click intermittently. You can see when I'm holding the mouse button down as a little icon appears above the cursor in the screen recording.

I'm seeing this issue on both latest chrome (79.0.3945.117) and firefox (72.0.1) on desktop, haven't tried on mobile. Thanks!

[yomotsu]

Ah, I see. here is the problem.

dampingFactor is changed by mouse dragging.
You can disable user input while zooming.

cameraControls.fitTo( object, true );
cameraControls.enabled = false;

However, there is no camera-move-end event to re-enable it for now.
(I should add the event)

Here is an workaround.

cameraControls.fitTo( object, true );
cameraControls.enabled = false;
setTimeout( () => {
  cameraControls.enabled = true;
}, 1000 );

[yomotsu]

[leoncvlt]

Thanks! I had the feeling it was something going on on update. Weirdly enough, setting controls.enabled = false was one of the first thing I tried, but wasn't working as expected.

I looked into it a bit more, and found it that I am calling controls.fitTo (and also disabling the controls) in response to a click event on a raycasted 3D object - since the click event propagates (does not when clicking a html button), then endDragging events never fires and the controls are stuck in a "mouse is held down" state when being disabled.

This actually resulted in another bug I had where re-enabling the controls afterwards would cause the camera to rotate even without clicking the mouse button, because it was still in the "stuck" state.

I managed to fix this with a workaround, by calling controls._state = 0 when disabling the controls to force it back to an ACTION.NONE state. It works, not sure if you can think of a least hacky way to do this :)

[looeee]

@yomotsu I guess now you can use the rest event?

cameraControls.fitTo( object, true );
cameraControls.enabled = false;

setTimeout( () => {
  cameraControls.enabled = true;
}, 1000 );

Would become

cameraControls.fitTo( object, true );
cameraControls.enabled = false;

cameraControls.addEventListener('rest', () => {
    cameraControls.enabled = true;
});

Or even

cameraControls.enabled = false;
await cameraControls.fitTo( object, true );
cameraControls.enabled = true;

[yomotsu]

@looeee Oh yeah! That's right!
Thanks for providing the great update and it saves other situations like this.

Let me close this issue.
Although, this is still kind of workaround but could solve

[leoncvlt]

Another workaround in case you still want to rotate the camera around during the zoom:

    const _prevDraggingDampingFactor = cameraControls.draggingDampingFactor;
    cameraControls.draggingDampingFactor = cameraControls.dampingFactor;
    await cameraControls.fitTo( object, true );
    cameraControls.draggingDampingFactor = _prevDraggingDampingFactor;