three.js mesh를 하나의 그룹으로 만들기

const group1 = new THREE.Group();
const box1 = new THREE.Mesh(geometry, material);

const group2 = new THREE.Group(); // THREE.Object3D()
const box2 = box1.clone();
box2.scale.set(0.3, 0.3, 0.3);
group2.position.x = 2;

const group3 = new THREE.Group(); // THREE.Object3D()
const box3 = box2.clone();
box3.scale.set(0.15, 0.15, 0.15);
box3.position.x = 0.5;

group3.add(box3);
group2.add(box2, group3);
group1.add(box1, group2);
scene.add(group1);

three.js의 Group() 또는 Object3D()을 통해 group 객체를 생성할 수 있다. 

이 객체에 다른 mesh를 추가하면 하나의 오브젝트인 마냥 그룹으로 행동하게 할 수 있다. 

참고로 mesh를 clone()을 통하여 객체를 복제해서 생성할 수도 있다. 

위 코드처럼 각 group에 box를 추가하고, 상위 group에 하위 group객체를 add해준 후 group1의 transform을 조정해보면 한 번에 그룹지어 변형된다.