How to reuse mesh/model in correct way

[jacky0707]

Hello guys ,I'm working on a project similar to Minecraft.

And in my world I have two kind of objects:

1. multiple boxes with video on it, and all of them will have different location and size, currently my code is like

2. multiple gltf object that loaded by useLoader, and with some image texture on it, and all these gltf object may have their own size, location and direction, and when user click on single model, it'll have different action base on its modelProps / modelLinks

Everythings works fine, but as the amount of boxes/models grown, the scene start to lag while user walking.

Currently I guess it's the way I generate the mesh inappropriate, making the efficacy bad and cause the scene render too much times, so the application lag.

So I wonder is there any better way to implement these two component mentioned above?

Any suggestions would be greatly appreciated.