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

パフォーマンスについて: プログラムをテストして、パフォーマンスにボトルネックがあるかどうかを確認します。3D の世界では、フレーム番号の概念がよく使用されます。まず、フレーム番号の意味を定義しましょう。 Three.js はブラウザ上で動作する 3D エンジンで、これを使用してさまざまな 3 次元シーンを作成できます。この記事では主に、Three.js がパフォーマンス プラグイン統計を使用してパフォーマンス モニタリングを実装する方法について説明します。必要な方はぜひ参考にしてください。以下一緒に学びましょう。

フレーム番号: グラフィックプロセッサが 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); 
 }

Stats は requestAnimationFrame() 関数呼び出しで更新する必要があります。

以上で、通常のプラグインエフェクトがページに表示されます。

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

Stats.prototype.setMode() メソッドは、プラグインのデフォルトのモニタリングを設定できます

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

このケースも、前のセクションのケースを使用して記述されており、コード全体:

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

関連する推奨事項:

Node.js でのイベント監視とイベント発行の使用例の詳細な説明

JavaScript イベント モデル、オブジェクト、監視、および配信コードの例の詳細な説明

WeChat アプレット ページ間を移動するときにイベントを監視する方法

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