three.js で始めるレンダリング関数をコールするときに利用するとよい
requestAnimationFrameメソッド。

requestAnimationFrame

setIntervalでも、同じ事ができるが、
ブラウザのタブが非活性の時にも動作してしまうため、CPU使用率が常に高くなります。

モダンブラウザでは、requestAnimationFrame関数が用意されるようになったため、この問題が解決しています。

この関数を呼び出すと、ブラウザによって定義されたもっとも効率のよい、できるだけ滑らかに描画する事が保証されます。

// レンダリング関数を作る
let render = function () {
    // 次の描画分をリクエストする
    window.requestAnimationFrame(render);

    renderer.render(scene, camera);
};

// 最初の呼び出し始め
render();

FPS測定用のヘルパー

three.jsの作者が作ったヘルパ用のライブラリがあります。

stats.js というもので、レンダリング関数で、Stats::updateメソッドをコールすると自動でFPSグラフを生成してくれます。

https://github.com/mrdoob/stats.js/

npm を使ってインストール

npm install --save stats.js
npm install --save-dev @types/stats

使い方はこんなに感じ

import * as Stats from "stats.js";

$(function () {
    let $mainFrame = $("body");
    $mainFrame.css({margin: 0});

    // Statsのインスタンスを作成
    let stats = new Stats();
    stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom

    $mainFrame.append(stats.dom);

    let render = function () {
        window.requestAnimationFrame(render);
        stats.update();

        renderer.render(scene, camera);
    };
    render();
});