利用性能插件统计实现性能监控的方法

序

关于性能：测试程序的性能是否存在瓶颈。在3D世界中，经常使用帧数的概念。首先，我们来定义帧数的含义。

帧数：图形处理器每秒可以刷新几次，通常用fps(每秒帧数)表示

关于性能：测试程序的性能是否存在瓶颈。在3D世界中，经常使用帧数的概念。首先，我们来定义帧数的含义。

帧数：图形处理器每秒可以刷新几次，通常用fps(每秒帧数)表示

添加stats性能插件后，默认会在左上角显示性能帧数、刷新时间和内存消耗。鼠标左键点击切换，默认显示每秒帧数。

首先，您需要引入stats插件。地址为官网下载文件中的examples/js/libs/stats.min.js。

然后，您需要实例化一个组件并将其添加到dom中。

//初始化性能插件var stats函数initStats(){ Stats=new Stats()；document . body . appendchild(stats . DOM)；}您需要在requestAnimationFrame()函数调用中更新统计信息。

函数animate() {//更新控制器控件. updatesrender()；//更新性能插件stats . update()；requestAnimationFrame(动画)；}这样，正常的插件效果就会显示在页面上。

设置收听的默认显示。

方法可以设置插件的默认监听

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；高度： 100%;}画布{显示：块；}/style/head body on load=' draw()；'/body script src=' http : build/三。js '/script script src=' http : examples/js/controls/trackbolcontrols。js '/script script src=' http : examples/js/libs/stats。量滴js '/脚本脚本var渲染器；函数initRender() { renderer=new THREE .WebGLRenderer({ anti IAS : true })；渲染器。setsize(窗口。内部宽度，窗户。内部高度)；文件。尸体。appendchild(渲染器。圆顶元件)；} var相机；函数initCamera() { camera=new THREE .透视相机(45，window . inner width/window . inner height，1，10000)；camera.position.set(0，0，400)；} var场景；函数initScene() { scene=new THREE .场景();}不同的光线函数initLight() { scene.add(new THREE .环境光(0x 404040))；光=新的三.DirectionalLight(0x ffffff)；light.position.set(1，1，1)；场景添加（光);}函数initModel() { var map=new THREE .TextureLoader().加载('示例/纹理/UV _ Grid _ sm。jpg’)；可变材料=新的三.MeshLambertMaterial({ map : map })；var cube=new THREE .网状（新三。盒几何(100,200,100,1,1,1),材料);scene.add(立方体);} //初始化性能插件定义变量统计；函数initStats(){ Stats=new Stats()；文件。尸体。appendchild(统计数据。DOM)；} //用户交互插件鼠标左键按住旋转，右键按住平移，滚轮缩放风险值控制。函数init controls(){ controls=new THREE .跟踪球控制器（摄像机);//旋转速度控件。rotatespeed=5；//变焦速度控件。zoom speed=3；//平移速度controls.panSpeed=0.8//是否不变焦controls.noZoom=false//是否不平移controls.noPan=false//是否开启移动惯性controls . static moveing=false//动态阻尼系数就是灵敏度控件。dynamicdampingfactor=0.3//未知，占时先保留//controls.keys=[ 65，83，68]；控件。addeventlistener(' change '，render)；}函数render(){ render。渲染(场景、相机);} //窗口变动触发的函数函数onWindowResize(){相机。aspect=窗口。内部宽度/窗口。内部高度；照相机。updateprojectionmatrix()；控件。handleresize()；render()；渲染器。setsize(窗口。内部宽度，窗户。内部高度)；}函数animate() { //更新控制器控件。update()；render()；//更新性能插件统计数据。update()；requestAnimationFrame(动画);}函数draw(){ initRender()；init scene()；initCamera()；init light()；init model()；init控件()；initStats()；animate()；窗户。onresize=OnWindowResize}/脚本/html总结

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