TrackballControls are not mouse event to rAF ratio independent.
See original GitHub issueDescription 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, …)
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (6 by maintainers)
https://bugs.chromium.org/p/chromium/issues/detail?id=992954
Oh yea, forgot about that 😅
Still I can do this
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 callupdate
. Is that by design? The OrbitControls make it relative easy to make a “render on demand” app. Just render onchange
events, no loop needed. As it is the TrackballControls you have to callupdate
in your own loop and then you’ll getchange
events but that means you’re always running a loop.