How can you merge the geometries of cloned objects in Three.JS?

Question

So I'm testing the best non-voxel way to display a lot of objects at once and so I found how to merge geometries.

Now, I can easily merge most geometries, but I can't seem to merge the geometries of cloned objects.

I've noticed that by simply using cloned objects, I can nearly get the same performance I get when merging geometries.

Is there a way to combine these two things for even better performance?

Here is a sample of my code, with the broken methods commented out.

var testGeo = new THREE.BoxGeometry( 1, 1, 1 );
var testMat = new THREE.MeshLambertMaterial( {color: 0xffff00  });
var testMesh = new THREE.Mesh( testGeo, testMat );
testMesh.position.set(1, 5, 1);
testMesh.castShadow = true;
testMesh.receiveShadow = true;
scene.add( testMesh );

//Testing with 900 objects.
var iterLength = 30;
for(var i = 0; i< iterLength; i++) {
    for(var j = 0; j< iterLength; j++) {


        var testGeo2 = new THREE.BoxGeometry( 1, 1, 1 );
        var testMat2 = new THREE.MeshLambertMaterial( {color: 0xffff00  });
        var testMesh2 = new THREE.Mesh( testGeo2, testMat2 );
        testMesh2.position.set(i, 2, j);
        testMesh2.castShadow = true;
        testMesh2.receiveShadow = true;


        //Clone Test (This won't work)
        /*
        var testMesh2 = testMesh.clone();
        testMesh2.position.set(i, 2, j);
        */


        //Reference Material/Geo test. (This also doesn't work)
        /*
        var testMesh2 = new THREE.Mesh( testGeo, testMat );
        testMesh2.position.set(i, 2, j);
        testMesh2.castShadow = true;
        testMesh2.receiveShadow = true;
        */


        //Merge.
        testMesh2.updateMatrix();
        testGeo.merge(testMesh2.geometry, testMesh2.matrix);
    }
}

Answer 1

Have you tried to use THREE.Object3D? UPDATED:

group = new THREE.Object3D();//create an empty container
group.add( testMesh.clone() );//add a mesh with geometry to it
scene.add( group );//when done, add the group to the scene