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

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

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