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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
中止javascript执行的方法
Feb 14 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
js闭包实例汇总
Nov 09 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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多线程抓取网页实现代码
2010/07/22 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
Vue实现简单分页器
2018/12/29 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python的装饰器使用详解
2017/06/26 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
电气技术员岗位职责
2013/11/19 职场文书
采购内勤岗位职责
2013/12/10 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
大跃进口号
2014/06/16 职场文书
建筑节能汇报材料
2014/08/22 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
关于颐和园的导游词
2015/01/30 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
党员心得体会范文2016
2016/01/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
HDFS免重启挂载新磁盘
2022/04/06 Servers
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL