Three.js はパフォーマンス プラグイン統計を使用してパフォーマンス監視の例を詳細に実装します

Three.js はブラウザ上で動作する 3D エンジンであり、これを使用してさまざまな 3 次元シーンを作成できます。次の記事では、Three.js がパフォーマンス プラグイン統計を使用してパフォーマンス モニタリングを実装する方法を主に紹介します。必要な方は参考にしてみてください。

はじめに

パフォーマンスについて: プログラムをテストして、パフォーマンスにボトルネックがあるかどうかを確認します。 3D の世界では、フレーム番号の概念がよく使用されます。

フレーム番号: グラフィックプロセッサが 1 秒あたりに更新できる回数。通常は fps (フレーム/秒) で表されます。

パフォーマンスについて: プログラムをテストして、パフォーマンスにボトルネックがあるかどうかを確認します。3D の世界ではフレーム番号です。よく使われる概念ですが、まずフレーム番号の意味を定義しましょう。

フレーム数: グラフィックプロセッサが 1 秒間に何回リフレッシュできるか。通常は fps (Frames Per Second) で表されます。

統計パフォーマンス プラグインが追加された後、各リフレッシュに使用されるパフォーマンス フレーム数と時間内部メモリを使用すると、デフォルトで左上隅に表示されます。マウスの左ボタンをクリックして切り替えると、デフォルトで 1 秒あたりのフレーム数が表示されます。

まず統計プラグインを導入する必要があります。アドレスは、公式Webサイトからのダウンロードファイルのexamples/js/libs/stats.min.jsです。

次に、コンポーネントをインスタンス化して dom に追加する必要があります。

//初始化性能插件 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); }

統計は、requestAnimationFrame()関数呼び出しで更新する必要があります。requestAnimationFrame()函数调用里面更新stats。

function animate() { //更新控制器 controls.update(); render(); //更新性能插件 stats.update(); requestAnimationFrame(animate); }

就这样，页面当中就会显示出来正常插件效果了。

设置默认显示的监听。

Stats.prototype.setMode()

rreee

デフォルトのディスプレイモニターを設定します。

stats.setMode(0); //默认的监听fps stats.setMode(1); //默认的监听画面渲染时间 stats.setMode(2); //默认的监听当前的不知道是啥

以上がThree.js はパフォーマンス プラグイン統計を使用してパフォーマンス監視の例を詳細に実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。