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代码,点击下载