stats.js随时查看fps

Posted 飘然离去

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了stats.js随时查看fps相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./libs/stats.js"></script>
</head>
<body>
	<div id="Stats-output">
	</div>
	<script type="text/javascript">
		var stats = initStats();
		function initStats() {
	            var stats = new Stats();
	            stats.setMode(0); // 0: fps, 1: ms
	            // Align top-left
	            stats.domElement.style.position = \'absolute\';
	            stats.domElement.style.left = \'0px\';
	            stats.domElement.style.top = \'0px\';

	            document.getElementById("Stats-output").appendChild(stats.domElement);

	            return stats;
	        }
	        setInterval(function(){
	        	stats.update();
	        },500);
	</script>
</body>
</html>

　源码：

/**
 * @author mrdoob / http://mrdoob.com/
 */

var Stats = function () {

    var startTime = Date.now(), prevTime = startTime;
    var ms = 0, msMin = Infinity, msMax = 0;
    var fps = 0, fpsMin = Infinity, fpsMax = 0;
    var frames = 0, mode = 0;

    var container = document.createElement( \'div\' );
    container.id = \'stats\';
    container.addEventListener( \'mousedown\', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
    container.style.cssText = \'width:80px;opacity:0.9;cursor:pointer\';

    var fpsDiv = document.createElement( \'div\' );
    fpsDiv.id = \'fps\';
    fpsDiv.style.cssText = \'padding:0 0 3px 3px;text-align:left;background-color:#002\';
    container.appendChild( fpsDiv );

    var fpsText = document.createElement( \'div\' );
    fpsText.id = \'fpsText\';
    fpsText.style.cssText = \'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px\';
    fpsText.innerHTML = \'FPS\';
    fpsDiv.appendChild( fpsText );

    var fpsGraph = document.createElement( \'div\' );
    fpsGraph.id = \'fpsGraph\';
    fpsGraph.style.cssText = \'position:relative;width:74px;height:30px;background-color:#0ff\';
    fpsDiv.appendChild( fpsGraph );

    while ( fpsGraph.children.length < 74 ) {

        var bar = document.createElement( \'span\' );
        bar.style.cssText = \'width:1px;height:30px;float:left;background-color:#113\';
        fpsGraph.appendChild( bar );

    }

    var msDiv = document.createElement( \'div\' );
    msDiv.id = \'ms\';
    msDiv.style.cssText = \'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none\';
    container.appendChild( msDiv );

    var msText = document.createElement( \'div\' );
    msText.id = \'msText\';
    msText.style.cssText = \'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px\';
    msText.innerHTML = \'MS\';
    msDiv.appendChild( msText );

    var msGraph = document.createElement( \'div\' );
    msGraph.id = \'msGraph\';
    msGraph.style.cssText = \'position:relative;width:74px;height:30px;background-color:#0f0\';
    msDiv.appendChild( msGraph );

    while ( msGraph.children.length < 74 ) {

        var bar = document.createElement( \'span\' );
        bar.style.cssText = \'width:1px;height:30px;float:left;background-color:#131\';
        msGraph.appendChild( bar );

    }

    var setMode = function ( value ) {

        mode = value;

        switch ( mode ) {

            case 0:
                fpsDiv.style.display = \'block\';
                msDiv.style.display = \'none\';
                break;
            case 1:
                fpsDiv.style.display = \'none\';
                msDiv.style.display = \'block\';
                break;
        }

    }

    var updateGraph = function ( dom, value ) {

        var child = dom.appendChild( dom.firstChild );
        child.style.height = value + \'px\';

    }

    return {

        REVISION: 11,

        domElement: container,

        setMode: setMode,

        begin: function () {

            startTime = Date.now();

        },

        end: function () {

            var time = Date.now();

            ms = time - startTime;
            msMin = Math.min( msMin, ms );
            msMax = Math.max( msMax, ms );

            msText.textContent = ms + \' MS (\' + msMin + \'-\' + msMax + \')\';
            updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );

            frames ++;

            if ( time > prevTime + 1000 ) {

                fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
                fpsMin = Math.min( fpsMin, fps );
                fpsMax = Math.max( fpsMax, fps );

                fpsText.textContent = fps + \' FPS (\' + fpsMin + \'-\' + fpsMax + \')\';
                updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );

                prevTime = time;
                frames = 0;

            }

            return time;

        },

        update: function () {

            startTime = this.end();

        }

    }

};
View Code

 

以上是关于stats.js随时查看fps的主要内容，如果未能解决你的问题，请参考以下文章

为啥我在 discord.js 中收到客户端错误

dat.gui stats.js 通用参数配置及图像统计工具

持久片段和查看器

postman 自动生成 curl 代码片段

postman 自动生成 curl 代码片段

无法在片段内查看接收短信