three.js draw multiple faces and performance - three.js

Question

I would like draw multiple faces (e.g. 100000x) with beast performance. I am trying to use "for" cycle, but there is a lot scene.children.
lastz=0;nextz=0;
for (i1=0; i1<100000; i1++) {
var geometry = new THREE.Geometry();
var material = defaultshellmaterial.clone();
nextz=Math.random();
geometry.vertices.push(new THREE.Vector3(0+i1,0,lastz));
geometry.vertices.push(new THREE.Vector3(1+i1,0,nextz));
geometry.vertices.push(new THREE.Vector3(1+i1,1,nextz));
geometry.vertices.push(new THREE.Vector3(0+i1,1,lastz));
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 3, 2));
geometry.computeFaceNormals();
lastz=nextz;
var mesh= new THREE.Mesh( geometry, material);
scene.add(mesh);
}
Is this the beast way? Exist the possibility draw the mesh as one scene child (like method which i am using for multiple lines or points)? And will be then posible select each face by mouse? My basic idea below does not work...
lastz=0;nextz=0;
var geometry = new THREE.Geometry();
var material = defaultshellmaterial.clone();
var mesh= new THREE.Mesh( geometry, material);
for (i1=0; i1<10000; i1++) {
nextz=Math.random();
geometry.vertices.push(new THREE.Vector3(0+i1,0,lastz));
geometry.vertices.push(new THREE.Vector3(1+i1,0,nextz));
geometry.vertices.push(new THREE.Vector3(1+i1,1,nextz));
geometry.vertices.push(new THREE.Vector3(0+i1,1,lastz));
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 3, 2));
geometry.computeFaceNormals();
lastz=nextz;
}
scene.add(mesh);

Answer 1

Thank you all for your help and inspiration! I found also one similar example on the three.js sites https://threejs.org/examples/#webgl_buffergeometry_uint The trick is in usage the buffergeometry which must use the float32array. Only problem is than the float32array has not the changable length and is necessary to create standard arrays for vertices, normals and colors and than tranform then it to the float32array. The longer but more powerfull solution how to draw a lot triangles could be:
var geometry = new THREE.BufferGeometry(); // buffered geometry
var positions = []; // standard arrays which allow push next number on the end (changeble length)
var normals = [];
var colors = [];
var pA = new THREE.Vector3(); //auxiliary vectors
var pB = new THREE.Vector3();
var pC = new THREE.Vector3();
var cb = new THREE.Vector3();
var ab = new THREE.Vector3();
var color = new THREE.Color();
for (i=0; i<1000000; i++) {
add=i*10;
ax=0+add;ay=0;az=0;
bx=10+add;by=0;bz=0;
cx=0+add;cy=10;cz=0;
positions.push( ax, ay, az ); // push new vertices
positions.push( bx, by, bz );
positions.push( cx, cy, cz );
// flat face normals (just compute normals with auxiliary vectors)
pA.set( ax, ay, az );
pB.set( bx, by, bz );
pC.set( cx, cy, cz );
cb.subVectors( pC, pB );
ab.subVectors( pA, pB );
cb.cross( ab );
cb.normalize();
var nx = cb.x;
var ny = cb.y;
var nz = cb.z;
normals.push( nx, ny, nz ); // push normals
normals.push( nx, ny, nz );
normals.push( nx, ny, nz );
// set random HSL color for each triangle
color.setHSL(Math.random(), 1, 0.5); // barvy duhy?
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
}
function disposeArray() { this.array = null; }// auxiliary function set inital null array
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) ); // transfor standard array which allows the ".push" to the Float32array suitable for 3D graphics
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
geometry.computeBoundingSphere(); // sometimes is usseful to define new boundary for new entities
var material = new THREE.MeshPhongMaterial( {
color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
side: THREE.DoubleSide, vertexColors: THREE.VertexColors
} );
mesh = new THREE.Mesh( geometry, material ); // all triangles will be in the one mesh what is powerfull
scene.add( mesh );