Question about InstancedMesh

I have a group of boxes (same geometry/same material), initially I have row by col boxes and the user can grow the grid of boxes by clicking up/down (adds a row of boxes) and left/right (adds a column of boxes). I read the docs and it says I have to recreate InstancedMesh if the count changes, will this be a bottleneck as this operation is common?

I also need to represent this grid as something like a 2d array so that it represents the physical order of the boxes, so I may need to store a reference to the mesh, which I am assuming is a problem (but I’ll try to think of a better way to do this).

I saw the examples that allow you to raycast and select one of the meshes in the instanced mesh, just confirming that this is possible? Do you think InstancedMesh is a good fit for my use case, I’m only worried about limitations because I need to able to tell apart the boxes? Also how big will the performance benefit be for a large n of boxes?

You can decrease the number of instances freely — so if you preallocate a sufficient number, you can let users add/remove boxes underneath that limit. Otherwise you’ll have to recreate the mesh, which could be fine if it’s not too frequent.

I saw the examples that allow you to raycast and select one of the meshes in the instanced mesh, just confirming that this is possible?

Yes.

Do you think InstancedMesh is a good fit for my use case, I’m only worried about limitations because I need to able to tell apart the boxes? Also how big will the performance benefit be for a large n of boxes?

If N is large (as in hundreds or thousands) then you’ll probably benefit noticeably from either (a) using instancing, or (b) merging meshes. In either of those cases you’d need to manage any identifying information about boxes yourself, although raycasting a particular box is probably easier with InstancedMesh. You can compare these options here: https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_instancing_performance.html (demo is not yet on the three.js site).

3 Likes