R3F / three.js - Instanciate a combination of objects

Question

In the following codesandbox example:

there are different geometries merged together thanks to drei library (2Boxes and 1 Sphere).

I would like to

1. have a lot of this new geometry with a good performances. I think the solution would be to instanciate the merged geometry but I do not know how to do it.

2. Still be able to control each part properties (for example, make a cube bigger than the other one in a special instance)

Could you please help me ?

Answer 1

A solution would be to:

• Create an instanceMesh for each part of the geometry
• Assemble each part by changing each geometry position

You can find this solution with 2 codeSandboxes:

• one using the Drei librairy but which get laggy around 10k elements
• one using instanceMesh from R3F which work pretty well with 100k elements.

I do not know if we can improve more the performance, but it seems to work pretty well like this.