recherche

Maison >interface Web >js tutoriel >Three.js utilise le plug-in de statistiques pour implémenter la surveillance des performances

Three.js utilise le plug-in de statistiques pour implémenter la surveillance des performances

小云云
小云云original
2018-02-01 13:27:241991parcourir

À propos des performances : testez un programme pour voir s'il existe un goulot d'étranglement dans les 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. Three.js est un moteur 3D exécuté dans le navigateur. Vous pouvez l'utiliser pour créer diverses scènes tridimensionnelles. Cet article vous présente principalement des informations pertinentes sur la manière dont Three.js utilise les statistiques du plug-in de performances pour implémenter la surveillance des performances. qui en a besoin Vous pouvez l'utiliser comme référence, apprenons ensemble ci-dessous.

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

Les statistiques doivent être mises à jour 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() peut définir la surveillance par défaut du plug-in 

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

Le cas est également écrit en utilisant le cas de la section précédente, l'intégralité du 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>

Recommandations associées :

Explication détaillée des exemples d'utilisation de la surveillance des événements et de la publication d'événements dans Node.js

Modèle d'événement javascript, explication détaillée des objets, exemples de code de surveillance et de livraison

Comment surveiller les événements lors du passage d'une page d'applet WeChat

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 la façon d'utiliser les instances d'opérateur d'expansion d'objet dans vuexArticle suivant：Explication détaillée de la façon d'utiliser les instances d'opérateur d'expansion d'objet dans vuex

Articles Liés

Voir plus