three.js之性能监视器

Posted 2022-08-23 aaronthon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 onload="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代码，点击下载

three.js之性能监视器_js代码