欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Three.js利用性能插件stats实现性能监听的方法

程序员文章站 2022-04-28 23:34:32
前言 关于性能:测试一个程序,性能上是否有瓶颈,在3d世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。 帧数:图形处理器每秒钟能够刷新几次,通常用fps(fr...

前言

关于性能:测试一个程序,性能上是否有瓶颈,在3d世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。

帧数:图形处理器每秒钟能够刷新几次,通常用fps(frames per second)来表示

关于性能:测试一个程序,性能上是否有瓶颈,在3d世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。

帧数:图形处理器每秒钟能够刷新几次,通常用fps(frames per second)来表示

stats性能插件添加了以后,会默认在左上角显示性能帧数,每次刷新所用时间,占用内存。鼠标左键点击可进行切换,默认显示每秒的帧数。

Three.js利用性能插件stats实现性能监听的方法   

首先需要将stats插件引入,地址是官网下载文件里面的examples/js/libs/stats.min.js。

然后需要实例化一个组件,然后添加到dom当中。

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

需要在requestanimationframe()函数调用里面更新stats。

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

就这样,页面当中就会显示出来正常插件效果了。

设置默认显示的监听。

stats.prototype.setmode()方法可以设置插件的默认监听

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

案例也是用的上一节的案例写的,全部代码:

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。