TrackballControls are not mouse event to rAF ratio independent.

Description of the problem

The TrackballControls seem to be designed that they take input from mouseMove and use it in update which is expected be called from requestAnimationFrame? They seem to expect there to be a 1x1 relationship, one mouseMove followed by 1 rAF. But if there are more mousemove events per rAF then they stop working correctly (run really slow)

Here’s a repo. Not sure this happens on all machines or OSes or browser. I’m in Chrome 80 on Windows 10. I also have the Oculus Rift software installed (no idea what that does to my system)

https://jsfiddle.net/greggman/qz7jug2v/

Here’s what I see.

With the devtools closed

With the devtools open

Adding some code I found with the devtools closed there is 1 mouse event per rAF but open I saw as many as 16 events per rAF

Adding calls to _this.update() in mousemove, touchmove, and wheel seems to fix it since then each event is handled individually?

https://jsfiddle.net/greggman/k8fotepb/

Note I didn’t test touchmove but I’m guessing it can’t hurt?

Three.js version

• Dev
• r115
• …

Browser

• All of them
• Chrome
• [?] Firefox
• [?] Internet Explorer

OS

• All of them
• Windows
• [?] macOS
• [?] Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[mrdoob]

https://bugs.chromium.org/p/chromium/issues/detail?id=992954

[greggman]

Oh yea, forgot about that 😅

Still I can do this

setInterval(() => {
  requestAnimationFrame(render);
}, 2000);

and I don’t think I’m only supposed to get mouseevents once every 2 seconds 😜

Which reminds me, another issue with TrackballControls is that the change event only gets issued if you call update. Is that by design? The OrbitControls make it relative easy to make a “render on demand” app. Just render on change events, no loop needed. As it is the TrackballControls you have to call update in your own loop and then you’ll get change events but that means you’re always running a loop.