Merge multiple mesh into a single one

Hi everyone, I already read a lot on this topic and I hope that you could help me to solve this problem.
I create a custom version of the voxel example, basically I change the shape of the voxel instead of a cube I put a polygon with hexagon shape. Now I want to put all in one all the shapes that I create (for my application all the shape will have at least one edge in common).
I try without success the following things:

let geom = new THREE.BufferGeometry();

for(let i = 0; i < scene.children.length; i++){
        if(scene.children[i].name === "custom-voxel"){
                geom.merge(scene.children[i].geometry);
        }
}

and this:

var geometries = [];
for(let i = 0; i < scene.children.length; i++){
        if(scene.children[i].name === "custom-voxel"){
                geometry.push(scene.children[i].geometry.clone());
        }
}

geom = mergeBufferGeometries(geometries);
geom.computeBoundingBox();
var meshh = new THREE.Mesh(
        geom,
        new THREE.MeshBasicMaterial({ color: 0x0000ff })
);

In the second case I have the trouble that all the shape will be merge into a single one, but the position is not keep (they are all in the same place).
Do you have any suggestion?
Thank you.

This question is also on StackOverflow

If you use .clone (), you will get an identical copy. You have to apply .translate ( x : float, y : float, z : float ) before the merge.

three.js docs

1 Like

I will try later, so I basically to do something like:

for(let I = 0; I < geometries.length; I++){
    geometries[I].translate(originalObject.position.x, originalObject.position.y, originalObject.position.z);
}

Right?

You have to calculate a different position for every single object.

Let’s assume you want to stack objects with identical z, it would be like this:


// 50 objects in arrangement 5, 10

for( let i = 0; i < 5 ; i ++ ) {

    for( let j = 0; j < 10 ; j ++ ) {
    
        geometries[ i * 10 + j ].translate( i, j, 0 );
        
    }
 
}

Of course, I don’t know your concrete geometrical structure.

Maybe there is something useful for you in the beginner example ( step 13) of the collection?

const honeyComb = createHoneyComb( radius, rings, thick, depth ); // see function below

Thanks, it works.

For posterity and anyone needing this:

        let geoms=[]
        let meshes=[]
        clone.updateMatrixWorld(true,true)
        clone.traverse(e=>e.isMesh && meshes.push(e) && (geoms.push(( e.geometry.index ) ? e.geometry.toNonIndexed() : e.geometry().clone())))
        geoms.forEach((g,i)=>g.applyMatrix4(meshes[i].matrixWorld));
        let gg = BufferGeometryUtils.mergeBufferGeometries(geoms,true)
        gg.applyMatrix4(clone.matrix.clone().invert());
        gg.userData.materials = meshes.map(m=>m.material)

Here is a way to merge multiple meshes underneath a common root, into a single mesh+geometry with drawgroups.