I'm developing a game on my website, but I'm encountering significant lag when I try to render around 5000 objects. I'm looking for some advice on how to enhance the performance. Here are links to my game and files: [Game](http://buildnblocks.net) | [Files](https://github.com/th3nu8/buildnblocks/tree/main)
2 Answers
Your code organization could use some work. Try breaking it into multiple files instead of keeping everything in a single HTML file. From what I see, you're using Three.js correctly, but you might be nearing its rendering limits. Consider using algorithms like octrees to manage visibility better; this can help by not rendering blocks that are fully obscured.
You might want to consider only rendering objects that are currently visible to the user. This technique can help reduce lag significantly. Make sure you’re not rendering everything at once.
I’m already trying to do that, but it’s still lagging. I attempted to only render the faces the camera sees, but I hit a wall with that.
Are there any web-based game engines that could handle more objects? I really want this project to stay on the web.