Three.js 여러 객체 Group으로 렌더링 하기

하나의 박스만 만들어서 렌더링을 해보았는데 이제 한번에 여러 3D 박스등 한번에 렌더링 하는것을 해보겠다. 

 

 

const scene = new THREE.Scene()
const group = new THREE.Group();
scene.add(group);

 

객체들을 그룹으로 관리해줄 컨테이너? 개념의 Group객체를 만들어서 각각의 박스 혹은 담아줄 객체들을 그룹에 담아서 그룹을 scene에 담아주면 된다. 

 

 

const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:0xff0000})
)

const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:0x00ff00})
)

const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:0x0000ff})
)

cube2.position.x = -2;
cube3.position.x = 2;
group.add(cube1);
group.add(cube2);
group.add(cube3);

 

 

그룹 자체의 위치를 변경해주는 것도 가능하다

 

group.position.y = 1;

 

 

 

group.position.y = 1;
group.scale.y = 2;
group.rotation.y = 1;