Rotating a model using clock.getDelta()

Questions
1

Hi folks!

I know that the OrbitControls have an autorotate option but I noticed that when enabled the model rotates at different speeds across browsers for some reason.

So I managed to find a solution to rotate the model at a consistent speed and would like to get your thought on this approach.

In the animation loop I included the following code which triggers the rotation on toggle click:

const delta = clock.getDelta();
if (model1 && toggleOne.checked) {
    model1.rotation.y += 0.2 * delta;
}

What do you think about this approach and do you think it can cause any performance issues down the line?

Also, I would be really grateful if somebody explained what is actually happening here. What is the getDelta method doing and why is multiplying the y rotation by it working.

Project:
https://codepen.io/grzegorz-rogala/pen/gOydgWx?editors=1010

Thanks!

2

If you rotate at constant step each frame, then faster computer/browser will make faster animation, slower computer/browser will make slower animations. This is something you have already experienced.

Delta is the time since the previous rendering.

Imagine rendering speed is 1 frame per second, this is delta = 1 second. Then for each frame the angle of rotation around Y will change by 0.2 (this is in radians, but it doesn’t matter).

Now imagine you use a browser and a computer that are 10 times faster. Then rendering will be 10 frames per second, but the delta will be 10 times smaller, i.e. 0.1 seconds. Here is what will happen for 1 second: 10 frames, each will change the angle of rotation by 0.02 (i.e. 0.2*delta), but overall, for 1 second the rotation will be 10(frames)*0.2(speed)*0.1(delta) which is again 0.2 – the same as in the previous case.

Now imagine 100 faster rendering and delta is 0.01 seconds. For 1 second of rendering you will get 100(frames)*0.2(speed)*0.01(delta) which is again 0.2.

Thus delta helps you achieve consistent visual speed. When the computer is slow, the animation makes fewer but larger steps; when the computer is fast, the animation makes more, but smaller steps.

4 Likes