Question

<script>

        var container;
        var camera, scene, renderer;
        var scale = 100, N=1000;
        var arr= [];
        var width = 720, height = 405;


         function average(v)
         {
              var items = v.length;
              var sum = 0.0;
              for (i = 0; i<items; i++)
              sum += v[i];
              return (sum/items);
            }

        start =function()
        {
        init();
        //animate();
        };      

        function init() 
        {

            container = document.getElementById("theCanvas");
            camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 10000 );
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 80;
            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer({antialias:true});

            renderer.setClearColorHex(0x000000, 1);
            renderer.setSize( width, height );

            container.appendChild( renderer.domElement );

            var geometry = new THREE.CubeGeometry( 1, 1, 1 );

            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            for ( var i = 0; i <= N; i++)
            {
                arr.push(new THREE.Mesh( geometry, material ));
                arr[i].position.set( (Math.random()-0.5) * scale, (Math.random()-0.5) * scale, (Math.random()-0.5) * scale ); 
                scene.add( arr[i] );


            }
            animate();
            document.getElementById('3dobjects').innerHTML = "Three.js Demo, The number of Cube Objects: " +N;
            }

        function animate() 
        {
            requestAnimationFrame( animate );
            render();
        }


        function render() 
        {   

            var t = 0;
            var t0 = (new Date()).getTime();
            var fpss = [];
            setInterval(function(){
                renderer.render(scene, camera);
                var t1 = (new Date()).getTime();
                fpss.push(1000/(t1 - t0));
                if(fpss.length>200)
                  fpss.shift();

                if(t%2==0)
                    document.getElementById('fpsout').innerHTML = "FPS coded Myself is: " +average(fpss);   
            t0 = t1;
                t++;
          },1000/60);

        }

为什么Three.js应用程序在几秒钟后帧速率会降至小数？我在错误的地方调用fps计算吗？如果可能的话，有人可以帮助我使用基本着色器程序来渲染没有纹理但颜色的简单立方体。

Answer 1

我通过调整stats.js并从中访问FPS找到了解决方案。

为什么在Three.js几秒后帧速率会降到小数？

1 个答案: