# How to merge multiple geometries?

I want to merge these 3 objects with BufferGeometryUtils.js

how can i define rotationvalue?
how to merge geometry with different material?

here is my code

``````
const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
for (let i = 1; i < 150; i++) {
const angle =  Math.PI * 2;
const radius = 8 + Math.random() ;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;

const cube = new THREE.Mesh(geometry, material);
cube.position.set(x, 0, z);
const cube1 = new THREE.Mesh(geometry, material);
const cube2 = new THREE.Mesh(geometry, material2);

cube.rotationValue = 0.2 + Math.abs(mathRandom(4));

cube1.scale.y = 0.06;;
cube.scale.y = 0.2 + Math.abs(mathRandom(4));

cube.scale.x = 0.7 + mathRandom(1 - 0.7);
cube.scale.z = 0.7 + mathRandom(1 - 0.7);

cube1.position.set(cube.position.x, 0, cube.position.z);

}
``````

You can only set these properties for 3D objects, not for geometries.

Try it with `Object3D.rotation`.

TBH, I would not do that since you end with multiple render items again. It’s best if you only merge geometries if they share the same material.

Considering your code, I recommend you use InstancedMesh instead of geometry merging.

can i create objects with random scale with InstancedMesh?
i read this description
“render a large number of objects with the same geometry”

Yes, each instance can have a different scale value.

Can you show an example similar to my code with InstncedMesh

three.js webgl - instancing - dynamic should provide a good insight.

thank you mugen
at first i’m confused
can i have two instancedMesh with 50 object on each with same location and size?
Is it correct to create two Instancedmesh with just one for loop?

const mesh1 = instancedmesh(geometry,material,50)
const mesh2 = instancedmesh(geometry,material,50)
for (var i = 1; i < 50; ++i) {
mesh1.setMatrixAt(i,…
mesh2.setMatrixAt(i,…

I want these objects to be placed in exactly the same place, given that the location of the first object is random
My problem is that I want to use the x and z position of mesh1 for mesh2 but not works

``````mesh1.setMatrixAt(
i,
new THREE.Matrix4()
.makeTranslation(2, 0 ,1)
.multiply(new THREE.Matrix4().makeScale(0, 0.1, 0))
);
``````

//-----------------
mesh2.setMatrixAt(
i,
new THREE.Matrix4()
.makeTranslation(mesh1.position.x, 0, mesh1.position.z)
.multiply(new THREE.Matrix4().makeScale(0, 0.05, 0))
);

//------
mesh1.position.x and z dont work in mesh2 traslation

Instanced mesh has two positions: mesh.position that affects all of its instances and individual per instance positions set in setMatrixAt.

In you code you apply “global” position of mesh1 to all instances of mesh2, so it doesn’t work like you want it to. You should match individual per instance positions.

In your case it should be:

``````mesh2.setMatrixAt(
i,
new THREE.Matrix4()
.makeTranslation(2, 0, 1)
.multiply(new THREE.Matrix4().makeScale(0, 0.05, 0))
);
``````

thank you
when i use console.log(mesh1.position) every 50 object has (0,0,0) position while is not

For getting individual per instance position/rotation/scale matrices you can use getMatrixAt
https://threejs.org/docs/?q=instanced#api/en/objects/InstancedMesh.getMatrixAt

can you show an example?
can i merge instancedmeshes objects?

I’m not sure what you mean by “merge”, when you merge two normal geometries, you combine their vertex related data arrays into one. When you say you want two instanced meshes to be at the same position, that’s not merge. Maybe if you provide a visual example of what you want then it’ll be easier to help you.

I have three type of geometries (box,plane,…), each of which consists of 50 objects and located in different places, that is, in total, 150 geometries are produced, which form 50 geometries.
I did this with Instansad Mesh
Now I want to merge these 50 objects in place so that when the scene is loaded they will be one frame.
with BufferGeometryUtils.mergeBufferGeometries