Control functions skip frames when frameloop = demand

[callumbooth]

Describe the bug

When using react three fiber with the frameloop set to demand and the Drei CameraControls. Dragging around works great however if you use controls functions like .rotate and .zoomTo the first few frames are skipped and the animation just jumps.

I've tried manually invalidating as per the r3f docs by adding an event listener to both the update and control event however neither fixed the issue.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/cameracontrols-basic-forked-tf9tct?file=%2Fsrc%2FApp.js%3A13%2C11
2. Click the rotate theta controls.
3. The first click (or anytime the frame is stationary) will skip frames, any clicks whilst the frameloop is running the animation will run correctly.

Code

No response

Live example

https://codesandbox.io/p/sandbox/cameracontrols-basic-forked-tf9tct?file=%2Fsrc%2FApp.js%3A13%2C11

Expected behavior

I'd expect the animation to run nicely regardless of if the frameloop is running or not

Screenshots or Video

No response

Device

Desktop

OS

MacOS

Browser

Chrome

[paulftw]

FYI, I'm not a maintainer, but your codesandbox link doesn't work for me - seems it's either deleted or marked private

[callumbooth]

FYI, I'm not a maintainer, but your codesandbox link doesn't work for me - seems it's either deleted or marked private

@paulftw ahh, didn't realise it was set to private by default. I've made it public now.

[yomotsu]

Thanks. reproduced the problem.
I think the following solution can address the problem.
https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#triggering-manual-frames

However, this must be implemented within the R3F camera-controls wrapper.
You can report this issue at the following URL: https://github.com/pmndrs/drei.