ThreejsでFPSの上限を設定する方法

yosi2024/08/07 7:58

Three.jsでFPSの上限を設定する方法をコード例を含めて教えてください。

Answerer AIPowered by gpt-3.5-turbo

Three.jsでFPSの上限を設定するには、以下のようなコードを使用します。

controls = new THREE.OrbitControls(camera, renderer.domElement);

// 希望のFPSの上限を設定する
const maxFPS = 60;

let lastUpdateTime = performance.now(); // 前回のフレームの時間

function animate() {
    requestAnimationFrame(animate);
  
    const now = performance.now();
    const deltaTime = now - lastUpdateTime;
  
    // 前回のフレームとの時間差分を基準にFPSを制御する
    if (deltaTime < 1000 / maxFPS) {
        return;
    }
  
    lastUpdateTime = now - (deltaTime % (1000 / maxFPS));
  
    // フレーム更新の処理を実行する
    // この中に描画処理やアニメーションなどを記述します
    // 例えば、controlsの更新を呼び出してカメラの位置を更新する場合は以下のようにします
    controls.update();
    
    renderer.render(scene, camera);
}

animate();

上記の例では、maxFPS変数に希望するFPSの上限を設定し、requestAnimationFrameによってフレームごとにanimate関数が繰り返し呼び出されます。animate関数内では、前回のフレームとの時間差分を計算し、maxFPSによって決められた上限のFPSを制御します。

controlsやrenderer.render以外に実行したい処理がある場合は、その部分を適宜追加してください。

yosi2024/08/07 8:02

Three.jsでFPSをコンソールに表示するコードを作成してください。

Answerer AIPowered by gpt-3.5-turbo

Three.jsでFPSをコンソールに表示するには、以下のようなコードを使用します。

let frameCount = 0; // フレーム数
let fps = 0; // FPS

function showFPS() {
    requestAnimationFrame(showFPS);
    
    frameCount++;
    const currentTime = performance.now();
  
    if (currentTime >= prevTime + 1000) { // 1秒ごとにFPSを計算する
        fps = frameCount;
        frameCount = 0;
        prevTime = currentTime;
      
        console.log("FPS: " + fps);
    }
}

let prevTime = performance.now();
showFPS();

上記の例では、frameCountとfpsの変数を使ってフレーム数とFPSを数えます。showFPS関数はrequestAnimationFrameによってフレームごとに繰り返し呼び出され、1秒ごとに現在のフレーム数を計算し、コンソールに表示します。

このコードを実行すると、コンソール上でFPSが表示されます。

yosi2024/08/07 8:12

performance.now()とかあるのか

https://developer.mozilla.org/ja/docs/Web/API/Performance/now

yosi2024/08/07 9:35

よさそう

コメントするにはログインが必要です

yosi