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


Posted in Javascript onSeptember 25, 2017

前言

关于性能:测试一个程序,性能上是否有瓶颈,在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>

总结

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

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 #Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 #Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 #Javascript
You might like
上海无线电三厂简史修改版
2021/03/01 无线电
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
Vue中插入HTML代码的方法
2018/09/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
浅析NumPy 切片和索引
2020/09/02 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
大学生军训广播稿
2014/01/24 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书