Working with a large number of objects
If you have scenes with large numbers of objects, you will start noticing some performance issues. Each of the meshes you create and add to the scene will need to be managed by Three.js, which will cause slowdowns when you're working with thousands of objects. In this recipe, we'll show you how to merge objects together to improve performance.
Getting ready
There are no additional libraries or resources required to merge objects together. We've prepared an example that shows you the difference in performance when using separate objects compared to a merged object. When you open up the 02.05-handle-large-number-of-object.html example, you can experiment with the different approaches.
You will see something similar to the following screenshot:
In the preceding screenshot, you can see that with a merged object approach, we still get 60 fps when working with 120,000 objects.
How to do it...
Merging objects in Three.js is very easy. The following code snippet...
