Custom geometry method

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

//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
    camera.position.x = 30;
    camera.position.y = 40;
    camera.position.z = 50;
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', 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.

@trumee How about using InstancedBufferGeometry ?