How to limit framerate in Three.js to increase performance, requestAnimationFrame with JavaScript?

Limiting the frame rate in Three.js can be achieved by controlling when you request the next animation frame using requestAnimationFrame.

You can use a technique called frame throttling to achieve this.

To do this we can write:

var lastFrameTime = 0;
var maxFPS = 30; // Set the maximum desired frame rate

function animate() {
    var currentTime = performance.now();
    var deltaTime = currentTime - lastFrameTime;

    // Check if enough time has passed to render the next frame
    if (deltaTime > 1000 / maxFPS) {
        // Update last frame time
        lastFrameTime = currentTime;

        // Your animation/rendering code here
        renderer.render(scene, camera);
    }

    // Request the next frame
    requestAnimationFrame(animate);
}

// Start the animation loop
animate();

In this code, lastFrameTime stores the timestamp of the last frame.

maxFPS specifies the maximum frames per second you want to achieve.

animate function is called recursively using requestAnimationFrame.

Inside animate, the time elapsed since the last frame (deltaTime) is calculated.

The condition deltaTime > 1000 / maxFPS ensures that a frame is rendered only if enough time has passed to maintain the desired frame rate.

By controlling when you request the next animation frame based on the desired frame rate, you effectively limit the frame rate.

This can help increase performance by reducing unnecessary rendering when the screen refresh rate exceeds the desired frame rate.