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

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

巴扎黑

Libérer： 2017-09-26 09:38:00

original

2450 Les gens l'ont consulté

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

Copier après la connexion

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

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

Copier après la connexion

Ç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); //默认的监听当前的不知道是啥

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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