Optimization THREE.js with about 7500 lines

Question

I've a optimization problem with my code.

I've this:

/////////// 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);

This work fine @ 30 fps. it's not the probleme.

The problem is when I add this code to link particle between:

/////////// LINE (var jump[] About 7500 Line with x1, y1, z1 and x2, y2, z2 inside) //////
            var testline;
            lines = new THREE.Object3D();
                for (var i=0; i < jump.length; i++) {
                    testline = new THREE.Geometry();
                    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];
                    testline.vertices = [new THREE.Vector3(x1, y1, z1),new THREE.Vector3(x2, y2, z2)];  
                    colorsjump[ i ] = new THREE.Color( 0xffffff );
                    colorsjump[ i ].setHSL( ( jump[i][6] * 1 ), 1, 0.5 );
                    //testline.colors = colorsjump[i];  
                    var line = new THREE.Line(testline, new THREE.LineBasicMaterial({
                    transparent: true, opacity: 0.3, color: colorsjump[ i ] }));
                    lines.add(line);
                }
            scene.add(lines);

this code down my fps to 7-8...

How can optimize the "line" code for gain performance and FPS?

thank you !

Answer 1

This work fine

thank to WestLangley

/////////// 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);