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();
}