threejs使用stat.js插件用于性能监听,插件最新下载地址为:http://github.com/mrdoob/stats.js
- FPS Frames rendered in the last second. The higher the number the better.上一秒帧率,数量越高越好。序号:0
- MS Milliseconds needed to render a frame. The lower the number the better.渲染一帧需要的时间,越低越好。序号:1
- MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)花费的内存(Chrome需要在快捷链接后添加–enable-precise-memory-info参数)序号:2
- CUSTOM User-defined panel support.(自定义面板)序号:3
以下是stat.js中的examples示例代码:
<!DOCTYPE html>
<html>
<head>
<title>stats.js - basic example</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/stats.min.js"></script>
<script>
//组件实例化
var stats = new Stats();
/**
* FPS Frames rendered in the last second. The higher the number the better.上一秒帧率,数量越高越好。序号:0
*
MS Milliseconds needed to render a frame. The lower the number the better.渲染一帧需要的时间,越低越好。序号:1
*
MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)花费的内存(Chrome需要在快捷链接后添加--enable-precise-memory-info参数)序号:2
*
CUSTOM User-defined panel support.(自定义面板)序号:3
*/
stats.showPanel( 0 );
document.body.appendChild( stats.dom );
var canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
document.body.appendChild( canvas );
var context = canvas.getContext( '2d' );
context.fillStyle = 'rgba(127,0,255,0.05)';
function animate() {
var time = performance.now() / 1000;
context.clearRect( 0, 0, 512, 512 );
//开始统计
stats.begin();
for ( var i = 0; i < 2000; i ++ ) {
var x = Math.cos( time + i * 0.01 ) * 196 + 256;
var y = Math.sin( time + i * 0.01234 ) * 196 + 256;
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.fill();
}
//结束统计
stats.end();
requestAnimationFrame( animate );
}
//循环调用
animate();
</script>
</body>
</html>
//用于更新状态,重新计时,重新计算性能
stats.update();