Merge multiple mesh into a single one

Questions
,
1

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

2

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
3

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?

4

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.

5

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

6

Thanks, it works.

7

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.

5 Likes
8

the answer was so helpful that I signed up especially here to tell you thank you <3 :smiley:

1 Like
9

Haha you’re very welcome!

:cowboy_hat_face:

10

i only started learning three js last night and i have no clue how i merge stuff can anybody help?

11

Scroll up!

2 Likes
12

Thank you from posterity!! Beautiful code!

1 Like