A3 Code Note

08/27/2022

Three.js : ステータスバー FPSなどの表示

バーをクリックすると以下それぞれの情報を表示してくれます。

FPS
Frames rendered in the last second. The higher the number the better.
最後の 1 秒間にレンダリングされたフレーム。数値が高いほど良い。

MS
Milliseconds needed to render a frame. The lower the number the better.
フレームのレンダリングに必要なミリ秒。数値が低いほど良い。

MB
MBytes of allocated memory. (Run Chrome with –enable-precise-memory-info)
割り当てられたメモリのメガバイト。(Chrome を --enable-precise-memory-info で実行)

CUSTOM
User-defined panel support.
ユーザー定義パネルのサポート

import Stats from "./jsm/libs/stats.module.js";

let container, stats;

animate(); // 記述する場所を変更

function init() {
  // divを作成しそこに描画
  container = document.createElement("div");
  document.body.appendChild(container);

  container.appendChild(renderer.domElement); // containerにレンダラーを入れる
  // document.body.appendChild(renderer.domElement); // bodyにレンダラーを入れる

  // ステータスバー作成
  stats = new Stats();
  container.appendChild(stats.dom);
}
function animate() {
  stats.update();
}