Javascript 优化3.js,约7500行

Javascript 优化3.js,约7500行,javascript,performance,optimization,three.js,line,Javascript,Performance,Optimization,Three.js,Line,我的代码有一个优化问题 我有这个: /////////// PARTICLE (var system[] about 5500 Particles with x, y, x inside) ////// var particle_system_geometry = new THREE.Geometry(); for (var i=0; i < system.length; i++) { var

我的代码有一个优化问题

我有这个:

/////////// PARTICLE (var system[] about 5500 Particles with x, y, x inside) //////
            var particle_system_geometry = new THREE.Geometry();
                for (var i=0; i < system.length; i++) {
                    var x = system[i][0];
                    var y = system[i][1];
                    var z = system[i][2];
                    var sec =  system[i][3] * 1;
                    if (sec.toFixed(2) <= 0) {
                        sec = 0;
                    }
                    particle_system_geometry.vertices.push(new THREE.Vector3(x, y, z));
                    colors[ i ] = new THREE.Color( 0xffffff );
                    colors[ i ].setHSL( ( sec * 0.5 ), 1, 0.5 );    
                }
            particle_system_geometry.colors = colors;           

            var particle_system_material = new THREE.ParticleSystemMaterial( { size: 5, map: sprite, vertexColors: true, transparent: true } );
            particle_system_material.color.setHSL( 1.0, 0.2, 0.7 );

            var particleSystem = new THREE.ParticleSystem(
              particle_system_geometry,
                particle_system_material
            );

            particleSystem.sortParticles = true;
            scene.add(particleSystem);
///PARTICLE(var系统[]大约5500个粒子,内有x、y、x)//////
var particle_system_geometry=new THREE.geometry();
对于(变量i=0;i
感谢韦斯特兰利

/////////// LINE (About 7500 Line with x1, y1, z1 and x2, y2, z2) //////
                var testline;
                testline = new THREE.Geometry();
                    for (var i=0; i < jump.length; i++) {
                    // Define the line start and end //
                        var x1 = jump[i][0];
                        var y1 = jump[i][1];
                        var z1 = jump[i][2];
                        var x2 = jump[i][3];
                        var y2 = jump[i][4];
                        var z2 = jump[i][5];
                    // Push Coord to vertices //
                        testline.vertices.push(new THREE.Vector3(x1, y1, z1),new THREE.Vector3(x2, y2, z2));    

                    // Colors "Hacks" //
                        colorsjump[ i ] = new THREE.Color( 0xffffff );
                        colorsjump[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );   
                        colorsjump2[ i ] = new THREE.Color( 0xffffff );
                        colorsjump2[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );
                    // Final Colors push in array //
                        lastColor.push(colorsjump[ i ], colorsjump2[ i ]);
                    }

                    // Set Geometry colors //
                    testline.colors = lastColor;

                    // Create Material for testline //
                    var lineMaterial = new THREE.LineBasicMaterial( {
                        color: 0xffffff,
                        vertexColors: THREE.VertexColors,
                        opacity: 0.2,
                        transparent: true
                    } );

                    // Create Line //
                    var line = new THREE.Line(testline, lineMaterial,  THREE.LinePieces  );
                    // Add Line to scene //
                    scene.add(line);
///LINE(约7500行,带有x1、y1、z1和x2、y2、z2)//////
var测试线;
testline=新的三点几何体();
对于(变量i=0;i
尝试只使用一条由多个线段组成的直线:
line=new THREE.line(几何体、材质、三个线条)
。在控制台中键入
renderer.info
并比较前后。
/////////// LINE (About 7500 Line with x1, y1, z1 and x2, y2, z2) //////
                var testline;
                testline = new THREE.Geometry();
                    for (var i=0; i < jump.length; i++) {
                    // Define the line start and end //
                        var x1 = jump[i][0];
                        var y1 = jump[i][1];
                        var z1 = jump[i][2];
                        var x2 = jump[i][3];
                        var y2 = jump[i][4];
                        var z2 = jump[i][5];
                    // Push Coord to vertices //
                        testline.vertices.push(new THREE.Vector3(x1, y1, z1),new THREE.Vector3(x2, y2, z2));    

                    // Colors "Hacks" //
                        colorsjump[ i ] = new THREE.Color( 0xffffff );
                        colorsjump[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );   
                        colorsjump2[ i ] = new THREE.Color( 0xffffff );
                        colorsjump2[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );
                    // Final Colors push in array //
                        lastColor.push(colorsjump[ i ], colorsjump2[ i ]);
                    }

                    // Set Geometry colors //
                    testline.colors = lastColor;

                    // Create Material for testline //
                    var lineMaterial = new THREE.LineBasicMaterial( {
                        color: 0xffffff,
                        vertexColors: THREE.VertexColors,
                        opacity: 0.2,
                        transparent: true
                    } );

                    // Create Line //
                    var line = new THREE.Line(testline, lineMaterial,  THREE.LinePieces  );
                    // Add Line to scene //
                    scene.add(line);