Three.jsのFPS表示(TypeScript版)

Three.jsのTypeScript環境で stats.js のセットアップに少しハマったのでそのメモです。
stats.jsはFPSを表示するライブラリです。
ChromeのDevToolsのRenderingタブでFPS表示しても良いけど、毎回手間だったので。

開発環境

Three.js: v0.113.2
states.js: 0.17.0

セットアップ手順

以下のパッケージを入れればOK！
npm i stats.js @types/stats.js

すいません、勘違いしてました。もうthree.jsにデフォルトで入ってました。

以下の感じにimportしてあげれば、型チェックもやってくれます

import Stats from 'three/examples/jsm/libs/stats.module';

const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

あとはループする処理にbegin()とend()を入れてあげればFPSの測定ができます（参考ソース）

function tick() {
  stats.begin();
  mesh.rotation.y += 0.01;
  stats.end();
  renderer.render(scene, camera);
  renderer.setAnimationLoop(tick);
}

類似した型定義に @types/stats があるけど、そちらでは上手く動かせなくてハマった

2020/02/27追記
以下のThree.js TutorialsはTypeScriptで書かれているので参考になると思う
Three.js Tutorials - Stats Panel