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实现网页抖动的菜单抖动效果
Aug 07 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
layui的layedit富文本赋值方法
Sep 18 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的输出:缓存并压缩动态页面
2013/06/11 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python正则中最短匹配实现代码
2018/01/16 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
设置python3为默认python的方法
2018/10/31 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
MIS软件工程师的面试题
2016/04/22 面试题
新学期决心书
2014/03/11 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
销售目标责任书
2014/07/23 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python