Custom geometry method

Questions
,
1

Hello,
I am trying to create a geometry consisting of a lot of cubes. Each cube is defined using a custom geometry with a set of vertices and faces (it is finite element model mesh). The mesh renders fine but when i try to rotate it, the performance is very poor. I was wondering whether the methodology I followed was incorrect.

I created a parent mesh and then added all my cube meshes to it. Here is the pseudo code:

//Create the Parent mesh 
var geom = new THREE.Geometry();
var materials = [
new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
];

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
scene.add(mesh);

//Iterate over the finite element cube definitions

for (element in cubedefinition)
{
   vertices =[define verticies]
   faces=[define faces]

   var geom1 = new THREE.Geometry();
   geom1.vertices = vertices;
   geom1.faces = faces;
   //define child mesh
   var mesh1=THREE.SceneUtils.createMultiMaterialObject(geom1, materials);
   //add child mesh to parent
   mesh.add(mesh1);
}
   
    camera.position.x = 30;
    camera.position.y = 40;
    camera.position.z = 50;
    camera.lookAt(scene.position);
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    
    render();
    function render() {
        renderer.render(scene, camera);
    }

Is this the optimum way of doing this?
Also, the finite element model is quite far away from global 0,0,0. How can I bring the global origin to the center of the model? My limited search showed my than a geometry can be centred, but i have a lot of interconnected geometries.

2

@trumee How about using InstancedBufferGeometry ?