Javascript / Three.js一百万次迭代循环性能

Question

我有这个javascript代码，我需要运行一次以从从Blender导入的3d对象（这是three.js项目）生成象限网格。 问题在于它运行着大约一百万次迭代的循环，并且脚本耗时很长，然后崩溃。 准确地说，有10,000次迭代，每次生成一次网格，然后执行121 raycaster.intersectObjects的另一个循环。 我想知道该脚本是否真的对Intel i7-7800x CPU要求如此高，或者问题是否取决于其他因素，例如浏览器内存或设置（我在所有浏览器上都进行了测试）。

    var scene= new THREE.Scene();

    renderer= new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.setClearColor (0xf9f9f9, 1);
    renderer.gammaOutput= true;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled= true;
    renderer.shadowMap.type= THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    var light= new THREE.DirectionalLight(0xffffff, 1.4, 100);
    light.position.set(3, 2, 0);
    light.castShadow= true;
    scene.add(light);
    light.shadow.mapSize.width= 512; 
    light.shadow.mapSize.height= 512;
    light.shadow.camera.near= 0.5;
    light.shadow.camera.far= 500;

    var camera= new THREE.PerspectiveCamera(75, 
    window.innerWidth/window.innerHeight, 0.1, 100000);
    camera.position.set(0, 70, 70);
    camera.lookAt(0, 0, 0);

    var controls= new THREE.OrbitControls(camera);

    var loader= new THREE.GLTFLoader();
    loader.load(
        'http://localhost/planegeometryeditor/meshes/map/map_def.gltf', 
        function(gltf) {
            gltf.scene.receiveShadow= true;
            scene.add(gltf.scene);
            scene.children[1].rotation.y= -(Math.PI/2);
            var sceneobjs= scene.children[1].children;
            for(var iobj in sceneobjs) {
                var obj= sceneobjs[iobj];
                obj.updateMatrixWorld();
                if(obj.name== 'terrain') { 
                   var terrain= obj; 
                   for(var tmindex in terrain.children[0].children) { 
                       terrain.children[0].children[tmindex].material.side= 
                       THREE.DoubleSide; 
                   }
                 }
                if(obj.name.search('tree')!= -1) { obj.name= 'tree' }
            }
            var terrain_bbox = new THREE.Box3().setFromObject(terrain);
            var terrain_position= terrain.position;

            //------------ LOOP -----------------------
            //-----------------------------------------

            var idquad= 0;
            for(var i= -49.5; i<=49.5; i= i+1) {
                for(var ii= -49.5; ii<=49.5; ii= ii+1) {

                    var idquad= idquad+1;
                    var quadgeo= new THREE.PlaneGeometry(1,1);
                    var quadmat= new 
                    THREE.MeshBasicMaterial({color:0x00ff00, side: 
                    THREE.DoubleSide});
                    var quad= new THREE.Mesh(quadgeo, quadmat);
                    quad.name= 'quad-'+idquad;
                    scene.add(quad);
                    quad.rotation.x= -(Math.PI/2);
                    quad.position.x= i;
                    quad.position.y= -5;
                    quad.position.z= ii;

                    for(var a= (i-0.5); a<=(i+0.5); a= 
                     Number((a+0.1).toFixed(2))) {
                        for(var aa= (ii-0.5); aa<=(ii+0.5); aa= 
                        Number((aa+0.1).toFixed(2))) {
                            var raycaster= new THREE.Raycaster();
                            var rorigin= new THREE.Vector3(a, -5, aa);
                            var rdirection= new THREE.Vector3(0, 1, 0);
                            raycaster.set(rorigin, rdirection);
                            var intersects= 
                            raycaster.intersectObjects(scene.children, 
                            true);
                        }
                    }

                }
            }

            //------------ LOOP -----------------------
            //-----------------------------------------

        }, // success
        undefined, 
        function (error) { console.error(error); }
    );

    render();