Learn Three.js - Third Edition

Merging multiple meshes into a single mesh

In most cases, using groups allows you to easily manipulate and manage a large number of meshes. When you're dealing with a very large number of objects; however, performance will become an issue. With groups, you're still working with individual objects that each need to be handled and rendered separately. With THREE.Geometry.merge(), you can merge geometries together and create a combined one. In the following screenshot, you can see how this works and the effect it has on performance. If you open the 02-merging.html example, you see a scene with a set of randomly distributed semi-transparent cubes. With the slider in the menu, you can set the number of cubes you want in the scene and redraw the ...