three.js之性能监视器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Three框架</title><script src="../static/three.js-master/build/three.js"></script><script src="../static/three.js-master/examples/js/libs/stats.min.js"></script><style type="text/css">div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script>var renderer;  // 渲染器var stats;  // 性能监视器function initThree() {width = window.innerWidth;height = window.innerHeight;renderer = new THREE.WebGLRenderer({antialias : true});renderer.setSize(width, height);document.getElementById('canvas-frame').appendChild(renderer.domElement);renderer.setClearColor(0xFFFFFF, 1.0);stats = new Stats();  // 创建一个性能监视器stats.domElement.style.position = 'absolute';  // 样式， 坐标stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById('canvas-frame').appendChild(stats.domElement);  // 添加到canvas-frame
            }var camera;  // 摄像机function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);camera.position.x = 0;camera.position.y = 0;camera.position.z = 800;camera.up.x = 0;camera.up.y = 1;camera.up.z = 0;camera.lookAt(0, 0, 0);  }var scene;  // 场景function initScene() {scene = new THREE.Scene();}var light;  // 光线function initLight() {light = new THREE.AmbientLight(0xFF0000);  // 环境光源light.position.set(100, 100, 200);scene.add(light);light = new THREE.PointLight(0x00FF00);  // 点光源light.position.set(0, 0,300);scene.add(light);}var mesh;  // 模型function initObject() {var geometry = new THREE.CylinderGeometry( 100,150,400);  // 构造圆柱体var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  // 构造表面mesh = new THREE.Mesh( geometry,material);  // 创建模型mesh.position = new THREE.Vector3(0,0,0);  scene.add(mesh);}function threeStart() {initThree();initCamera();initScene();initLight();initObject();animation();}function animation(){//renderer.clear();//camera.position.x =camera.position.x +1;mesh.position.x-=1;renderer.render(scene, camera);requestAnimationFrame(animation);stats.update();  // 调用stats.update()函数来统计时间和帧数}</script></head><body οnlοad="threeStart();"><div id="canvas-frame"></div></body>
</html>

性能监视器是three.js里面的一个类：

var stats = new Stats();
stats.setMode(1); // 0: fps, 1: ms
// 将stats的界面对应左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
setInterval( function () {stats.begin();// 你的每一帧的代码
    stats.end();
}, 1000 / 60 );

1、setMode函数

参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。

2、stats的domElement

stats的domElement表示绘制的目的地（DOM），波形图就绘制在这上面。

3、stats的begin函数

begin，在你要测试的代码前面调用begin函数，在你代码执行完后调用end()函数，这样就能够统计出这段代码执行的平均帧数了。

附带three.js代码，点击下载

附带status.min.js代码，点击下载

转载于:https://www.cnblogs.com/aaronthon/p/10980865.html

three.js之性能监视器相关推荐

数据库开发基本操作-安装Sql Server 2005出现“性能监视器计数器要求”错误解决方法...
今天在安装SQL Server 2005时,出现"性能监视器计数器要求"错误,因为以前出现过这种错误,得到了解决.今天又又出现这种错误,但并不是很清楚当时的解决办法,所以这次把解决 ...
Exchange工具11—性能监视器
windows操作系统带的性能监视器非常有用,当我们部署了exchange服务器之后,有非常多的exchange的性能指标可供我们去监视分析,比如磁盘I/O的.网络的.内存的.CPU的.exchang ...
提升 Node.js 应用性能的 5 个技巧
"如果nginx没有在你的节点服务器之前,那么你可能就错了."Bryan Hughes在Twitter上说 Node.js是全球领先的用JavaScript--世界上最流行的编程语 ...
vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
准备：新V8即将到来，Node.js的性能正在改变
V8的Turbofan的性能特点将如何对我们优化的方式产生影响审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...
SQL Server 2005 重装时报：对性能监视器计数器注册表值执行系统配置检查失败
问题描述: SQL Server 2005 卸载之后重新安装,在执行检查时报:对性能监视器计数器注册表值执行系统配置检查失败.有关详细信息,请参阅自述文件或 SQL Server 联机丛书中的&quo ...
自定义Windows性能监视器
Windows 性能监视器是一个很好用的自带监视工具,对于一些基本简单的监视需求可以轻松满足.本文主要总结了一下如何将自己应用中的一些性能数据暴露到性能监视器上方便管理. 什么?不知道什么是Windo ...
Windows 2003性能监视器中的计数器名称变成数字的解决方法
前些天在给Exchange安装IMF后,看到IMF指南里面说,利用Performance也就是性能监视器可以查看IMF的性能,于是打开Performance, 但是却看到了下面这一幕,所有的计数器都变 ...
结合“性能监视器” 排查、处理性能瓶颈导致应用吞吐率等指标上不去的问题...
双11备战前夕,总绕不过性能压测环节,TPS 一直上不去 / 不达标,除了代码上的问题外,服务器环境.配置.网络.磁盘.CPU 亦是导致性能瓶颈的重要一环,本文旨在分享最近项目性能压测过程中的排查经验 ...

three.js之性能监视器

three.js之性能监视器相关推荐

最新文章

热门文章