Merge meshes with userData

Questions
, ,
1

Hello,

I have this code here with as an example a set of cubes with user data to feed a hover tool that provides information on what we are pointing at.

https://codesandbox.io/p/sandbox/47cqw5?file=%2Fsrc%2FApp.js%3A148%2C13

You expect, the more cubes, the slower it gets. I would like to merge the instances in order to reduce the draw calls.

In this example, i use cubes, but in the end, i will be using meshes defined by their triangles as initiated in the CustomMesh class. so every object present in the merge will be different and not be an instance of the same item.

How would you approach this question? i can’t get anything to work using drei’s Merged to which i provide the cube loop:

{Array.from({ length: names.length }, (_, i) => (
            <Cell
              key={i}
              position={positions[i]}
              name={names[i]}
              base_color={colors[i]}
              edge_color={edge_colors[i]}
              value={values[i]}
              isHovered={hoveredCell && hoveredCell.name === names[i]} // Replace with your logic
            />
          ))}

Thanks in advance,

Zelfior