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.prototype.setMode()
メソッドは、プラグインのデフォルトのモニタリングを設定できますstats.setMode(0); //默认的监听fps stats.setMode(1); //默认的监听画面渲染时间 stats.setMode(2); //默认的监听当前的不知道是啥
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body onload="draw();"> </body> <script src="build/three.js"></script> <script src="examples/js/controls/TrackballControls.js"></script> <script src="examples/js/libs/stats.min.js"></script> <script> var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); camera.position.set(0, 0, 400); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { scene.add(new THREE.AmbientLight(0x404040)); light = new THREE.DirectionalLight(0xffffff); light.position.set(1,1,1); scene.add(light); } function initModel() { var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); var material = new THREE.MeshLambertMaterial({map:map}); var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material); scene.add(cube); } //初始化性能插件 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放 var controls; function initControls() { controls = new THREE.TrackballControls( camera ); //旋转速度 controls.rotateSpeed = 5; //变焦速度 controls.zoomSpeed = 3; //平移速度 controls.panSpeed = 0.8; //是否不变焦 controls.noZoom = false; //是否不平移 controls.noPan = false; //是否开启移动惯性 controls.staticMoving = false; //动态阻尼系数 就是灵敏度 controls.dynamicDampingFactor = 0.3; //未知,占时先保留 //controls.keys = [ 65, 83, 68 ]; controls.addEventListener( 'change', render ); } function render() { renderer.render( scene, camera ); } //窗口变动触发的函数 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); controls.handleResize(); render(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { //更新控制器 controls.update(); render(); //更新性能插件 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); animate(); window.onresize = onWindowResize; } </script> </html>
以上がThree.js はパフォーマンス プラグイン統計を使用してパフォーマンス監視の例を詳細に実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。