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 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
php 数组元素快速去重
2017/05/05 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python简单实现基数排序算法
2015/05/16 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
一行python实现树形结构的方法
2019/08/09 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
营销团队口号
2014/06/06 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
党员带头倡议书
2015/04/29 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL