I’m struggling with a case that I thought would be documented, but my researches gave nothing.
I have a single-app website based on React, and I have a Three.js scene in background of every page.
Whenever I navigate in the website, it triggers changes into the 3D scene, without reloading it.
And I have very specific animations that need to last exactly one second in order to be synced with the other parts of the website.
For instance, when I scroll down the camera moves to the bottom in order to give the illusion of going underground. But in the mean time, I also have HTML elements that moves from bottom to top, and their animations are handled with CSS.
So the two animations should occur and end at the same time.
BUT here’s my issue: what about screen’s frame rate?
My desktop computer’s screen runs at 60fps, but on an unplugged laptop the screen’s fps is limited to 30.
As the render loop is based on RequestAnimationFrame, which is bound to the screen’s frame rate, the 3D scene will update at different speeds on a desktop and an unplugged laptop.
So my animation takes 1s on my desktop, but 2s on a laptop.
People talk about Tween.js and the Animation API from Three.js, but no one speaks about the frame rate.
Is Tween.js handling this fps behavior?
Should I implement an fps calculation in order to update my scene?
How can I make consistent animations not depending on the variable frame rate?