Grouping 3D Objects in Three.js[r145] (Managing Them Together)
By creating a group in three.js and adding meshes to it, you can scale or rotate all of them together as a single unit.
In the sample below, a group is created and 100 meshes are added to it.
When you change the scale of the group, the change is applied to all 100 meshes.
When you rotate the group, all 100 meshes rotate together.
You can rotate with left mouse drag, move with right mouse drag, and zoom with the mouse wheel.
// Create a group group=new THREE.Group; // Create 100 meshes let mesh=[]; for(let i=0;i<100;i++){ mesh[i]=new THREE.Mesh(sphereGeometry,material[Math.floor(Math.random()*material.length)]); mesh[i].castShadow=true; mesh[i].receiveShadow=true; // Bias the distribution toward the outer area let r=Math.sqrt(Math.sqrt(Math.random()))*40+10; let x=Math.random()*r; if(Math.random()<0.5){x=-x;} let y=Math.random()*Math.sqrt(r*r-x*x); if(Math.random()<0.5){y=-y;} let z=Math.sqrt(r*r-x*x-y*y); if(Math.random()<0.5){z=-z;} mesh[i].position.set(x,y,z); // Add the mesh to the group group.add(mesh[i]); }