Heim > Artikel > Web-Frontend > Three.js verwendet das Statistik-Plugin, um die Leistungsüberwachung zu implementieren

Three.js verwendet das Statistik-Plugin, um die Leistungsüberwachung zu implementieren

小云云Original: 2018-02-01 13:27:241968Durchsuche

Informationen zur Leistung: Testen Sie ein Programm, um festzustellen, ob es einen Leistungsengpass gibt. In der 3D-Welt wird häufig das Konzept der Bildnummer verwendet. Definieren wir zunächst die Bedeutung der Bildnummer. Three.js ist eine 3D-Engine, die im Browser ausgeführt wird. Sie können damit verschiedene dreidimensionale Szenen erstellen. In diesem Artikel erfahren Sie hauptsächlich, wie Three.js die Leistungs-Plug-in-Statistiken verwendet, um die Leistungsüberwachung zu implementieren Wer braucht es? Sie können es als Referenz verwenden. Lassen Sie uns unten gemeinsam lernen.

Frame-Nummer: Wie oft der Grafikprozessor pro Sekunde aktualisiert werden kann, normalerweise dargestellt in fps (Frames Per Second)

Informationen zur Leistung: Testen Sie ein Programm, um festzustellen, ob ein Engpass vorliegt Leistung: In der 3D-Welt wird häufig das Konzept der Frame-Nummer verwendet. Definieren wir zunächst die Bedeutung der Frame-Nummer.

Frame-Nummer: Wie oft der Grafikprozessor pro Sekunde aktualisiert werden kann, normalerweise dargestellt durch fps (Frames Per Second)

Nachdem das Statistik-Leistungs-Plug-in hinzugefügt wurde, wird die Leistung angezeigt Wird standardmäßig in der oberen linken Ecke angezeigt. Die Anzahl der Bilder, die für jede Aktualisierung benötigte Zeit und der belegte Speicher. Klicken Sie zum Umschalten mit der linken Maustaste und die Anzahl der Bilder pro Sekunde wird standardmäßig angezeigt.

Zuerst müssen Sie das Statistik-Plug-in vorstellen. Die Adresse in der Download-Datei lautet examples/js/libs/stats.min.js von der offiziellen Website.

Dann müssen Sie eine Komponente instanziieren und zum Dom hinzufügen.

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

Statistiken müssen im Funktionsaufruf requestAnimationFrame() aktualisiert werden.

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

Das war's, der normale Plug-in-Effekt wird auf der Seite angezeigt.

Legen Sie den Standardanzeigemonitor fest.

Die Methode Stats.prototype.setMode() kann die Standardüberwachung des Plug-Ins festlegen

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

Der Fall wird auch unter Verwendung des Falls im vorherigen Abschnitt geschrieben. der gesamte Code:

<!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>

Verwandte Empfehlungen:

Detaillierte Erläuterung der Anwendungsbeispiele für Ereignisüberwachung und Ereignisveröffentlichung in Node.js

Javascript-Ereignismodell, detaillierte Erläuterung von Objekten, Überwachung und Beispiele für Zustellungscodes

So überwachen Sie Ereignisse beim Wechseln zwischen WeChat-Applet-Seiten

Das obige ist der detaillierte Inhalt vonThree.js verwendet das Statistik-Plugin, um die Leistungsüberwachung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Verwendung von Objekterweiterungsoperatorinstanzen in VuexNächster Artikel：Ausführliche Erläuterung der Verwendung von Objekterweiterungsoperatorinstanzen in Vuex

In Verbindung stehende Artikel

Mehr sehen