Geometries and Meshes - Three.js - page 79

create a new THREE.Geometry() object named mergedGeometry and then cre-
ate a large number of BoxGeometry objects, as shown in the highlighted code sec-
tions:
var mergedGeometry = new THREE.Geometry();
for (var i = 0; i < control.numberToAdd; i++)
{
var cubeGeometry = new THREE.BoxGeometry(
4*Math.random(),
4*Math.random(),
4*Math.random());
var translation = new
THREE.Matrix4().makeTranslation(
100*Math.random()-50,
0, 100*Math.random()-50);
cubeGeometry.applyMatrix(translation);
mergedGeometry.merge(cubeGeometry);
}
var mesh = new THREE.Mesh(mergedGeometry, new
THREE.MeshNormalMaterial({
opacity: 0.5,
transparent: true
}));
scene.add(mesh);
We merge each cubeGeometry object into the mergedGeometry object by calling
the merge function. The result is a single geometry that we use to create
THREE.Mesh , which we add to the scene.
How it works...
When you call the merge function on a geometry (let's call it merged ) and pass in
the geometry to be merged (let's call this one toBeMerged ), Three.js takes the fol-
lowing steps:
1. First, Three.js clones all the vertices from the toBeMerged geometry and
adds them to the vertices array of the merged geometry.