Maison > Article > interface Web > Three.js utilise les statistiques du plug-in de performances pour implémenter en détail des exemples de surveillance des performances

Three.js utilise les statistiques du plug-in de performances pour implémenter en détail des exemples de surveillance des performances

巴扎黑original: 2017-09-26 09:38:002451parcourir

Three.js est un moteur 3D exécuté dans le navigateur. Vous pouvez l'utiliser pour créer diverses scènes tridimensionnelles. L'article suivant vous présente principalement comment Three.js utilise les statistiques du plug-in de performances pour implémenter la surveillance des performances. Les amis qui en ont besoin peuvent se référer aux informations pertinentes. Étudions ensemble.

Avant-propos

À propos des performances : Tester un programme pour voir s'il y a un goulot d'étranglement dans les performances Dans le monde 3D, le concept de cadre. Le nombre est souvent utilisé. Tout d’abord, définissons la signification du numéro de trame.

Numéro d'image : combien de fois le processeur graphique peut être actualisé par seconde, généralement représenté par des images par seconde (Frames Per Second).

À propos des performances : testez un programme pour voir s'il y a un goulot d'étranglement dans performances. Dans le monde 3D, le concept de numéro d’image est souvent utilisé. Tout d’abord, définissons la signification du numéro d’image.

Numéro d'image : combien de fois le processeur graphique peut être actualisé par seconde, généralement représenté par des images par seconde (Frames Per Second).

Une fois le plug-in de performances de statistiques ajouté, les performances seront affiché dans le coin supérieur gauche par défaut Le nombre d'images, le temps nécessaire à chaque actualisation et la mémoire occupée. Cliquez sur le bouton gauche de la souris pour changer, et le nombre d'images par seconde est affiché par défaut.

Vous devez d'abord introduire le plug-in de statistiques, l'adresse est examples/js/libs/stats.min.js dans le fichier de téléchargement du site officiel.

Ensuite, vous devez instancier un composant et l'ajouter au dom.

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

doit mettre à jour les statistiques dans l'appel de fonction requestAnimationFrame().

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

Ça y est, l'effet normal du plug-in sera affiché sur la page.

Définissez le moniteur d'affichage par défaut. La méthode

Stats.prototype.setMode() permet de définir la surveillance par défaut du plug-in

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

Le cas est également utilisé dans la section précédente Écrit par le cas, tous les 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de Three.js utilisant le plug-in de contrôle d'orbite (contrôle d'orbite) pour contrôler l'interaction du modèleArticle suivant：Explication détaillée de Three.js utilisant le plug-in de contrôle d'orbite (contrôle d'orbite) pour contrôler l'interaction du modèle

Articles Liés

Voir plus