Heim > Artikel > Web-Frontend > Three.js verwendet Leistungs-Plug-in-Statistiken, um Beispiele für die Leistungsüberwachung im Detail zu implementieren

Three.js verwendet Leistungs-Plug-in-Statistiken, um Beispiele für die Leistungsüberwachung im Detail zu implementieren

巴扎黑Original: 2017-09-26 09:38:002462Durchsuche

Three.js ist eine 3D-Engine, die im Browser ausgeführt wird. Sie können damit verschiedene dreidimensionale Szenen erstellen. Der folgende Artikel stellt Ihnen hauptsächlich vor, wie Three.js die Leistungs-Plug-In-Statistiken verwendet, um die Leistungsüberwachung zu implementieren. Freunde, die es brauchen, können sich auf die entsprechenden Informationen beziehen. Lassen Sie uns gemeinsam lernen.

Vorwort

Über die Leistung: Testen Sie ein Programm, um festzustellen, ob es in der 3D-Welt einen Leistungsengpass gibt Nummer wird häufig verwendet. Definieren wir zunächst die Bedeutung der Frame-Nummer.

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); 
 }

muss Statistiken im Funktionsaufruf requestAnimationFrame() aktualisieren.

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 im vorherigen Abschnitt verwendet. Schreibweise nach Groß-/Kleinschreibung, alle Codes:

<!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( &#39;change&#39;, 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>

Das obige ist der detaillierte Inhalt vonThree.js verwendet Leistungs-Plug-in-Statistiken, um Beispiele für die Leistungsüberwachung im Detail 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：Detaillierte Erläuterung der Verwendung des Orbit Controls-Plug-Ins (Orbit Control) durch Three.js zur Steuerung der ModellinteraktionNächster Artikel：Detaillierte Erläuterung der Verwendung des Orbit Controls-Plug-Ins (Orbit Control) durch Three.js zur Steuerung der Modellinteraktion

In Verbindung stehende Artikel

Mehr sehen