[SOLVED] How to render efficiently a mesh multiple times in three js?

How to render efficiently a mesh multiple times in three js?

Im trying to create a cube world game. So there is 3d array of blocks, and each of them is an array of mesh (for now the mesh array is actually a single mesh, cube). It works, but when I use a big amount of blocks (50x1x50 is enough) the fps drops very low (something like 3).

I use clone() function when I use a block more than once, but its not enough. The geometry of the meshes is BoxBufferGeometry. I also tried to use the same geometry and texture(instead of using clone) but it didn't get better.

So, How can I increase the fps? what magic do similar games do?

Solution

You can look into instancing: https://codepen.io/ykob/pen/xqvXex

Or you can use the .merge method on your geometries to merge them into a single geometry, and render one mesh per region.

someFakeCodeSoSOWillLetMePost();