How to solve the operation of hiding some mesh after BufferGeometry merges multiple mesh

I used BufferGeometry to merge several mesh together, but I recorded the index for each mesh, and there’s an operation to hide the individual mesh. What should I do or have a better way to handle it?

1 Like

Providing you have a single group in each geometry for your meshes, with the indices you kept you should:

  • offset the indices of mesh #2 by the number of vertices of mesh #1 (meaning, add to each index the vertex count)
  • offset the indices of mesh #3 by the number of vertices of mesh #1 + mesh #2
  • and so on

Then, if you want to show only mesh #1, then call .setIndex() on the merged mesh with the indices of mesh #1.

If you want to show only mesh #2 + mesh #3, then call .setIndex() with the concatenation of the indices of mesh #2 and mesh #3.

Are there any cases provided? Because I’m not very skilled.

Something like (I didn’t know setDrawRange existed when I replied to use setIndex above):

Say you have geom1, geom2 and geom3 the BufferGeometry of your three unmerged meshes, and geom is the BufferGeometry of the merged meshes.

To show only mesh 1, use geom.setDrawRange(0, geom1.getIndex().array.length)

To show only mesh 2, use geom.setDrawRange(geom1.getIndex().array.length, geom2.getIndex().array.length)

To show only mesh 3, use geom.setDrawRange(geom1.getIndex().array.length + geom2.getIndex().array.length, geom3.getIndex().array.length)

To show everything again, use geom.setDrawRange(0, Infinity).

I did not test this, but I think it should work…

All right, I’ll try it first.

This method seems to show only a single mesh, and if I want to display two or more at the same time, it doesn’t seem to work.

Do this a single time:

var geoms = [geom1, geom2, geom3];
var indices = [];

var ofst = 0;
geoms.forEach((g) => {
	var index = Array.from(g.getIndex());
	for (let i = 0; i < index.length; ++i) {
		index[i] += ofst;
	}
	indices.push(index);
	ofst += g.getAttribute("position").count;
});

Then, to show mesh 1 + 3:

var idx = [
	...indices[0],
	...indices[2]
];

geom.setIndex(idx);

To show 1 + 2 + 3:

var idx = [
	...indices[0],
	...indices[1],
	...indices[2]
];

geom.setIndex(idx);

Warning: untested code

Thank you very much for solving this problem with your help

Hello, now there is a question to ask you, on this basis how to achieve the model explosion effect as shown in the