使用stat.js给Three.js添加帧数监测

可以使用帧来测试程序的性能，帧数表示图形处理器每秒钟能够刷新的次数，通常使用fps（Frames Per Second）来表示。在Three.js中，性能由一个性能监视器来管理，它的介绍可以在https://github.com/mrdoob/stats.js 看到，效果展示：

首先到github上下载js文件：https://github.com/mrdoob/stats.js

在Three.js中，性能监视器被封装在Stats类中，一般使用方法如下所示：

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {

	stats.begin();

	// monitored code goes here

	stats.end();

	requestAnimationFrame( animate );

}

requestAnimationFrame( animate );

测试代码：

<!DOCTYPE html>
<html>
<head>
	<title>Wonanut 3D</title>
	<style type="text/css">
		body { margin: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
</head>
<body>
	<script type="text/javascript" src="js/three.js"></script>
	<script type="text/javascript" src="js/stats.js"></script>
	<script type="text/javascript">
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		var geometry = new THREE.BoxGeometry(1, 1, 1);
		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );

		camera.position.z = 5;

		var stats = new Stats();
		stats.showPanel( 0 );
		document.body.appendChild( stats.dom );

		function animate() {
			stats.begin();

			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;
			renderer.render( scene, camera );

			stats.end();

			requestAnimationFrame( animate );
		}
		animate();
	</script>
</body>
</html>

效果展示：

千瞱

发布了115 篇原创文章 · 获赞 96 · 访问量 20万+

私信关注

使用stat.js给Three.js添加帧数监测

猜你喜欢