threejs(3)

이번엔~~ transform 학습

Vector3

• 3D 벡터를 나타내는 클래스
• 3D 공간의 한 점 (x, y, z 값을 갖는다.)

Group

• Scene Graph 를 이용하여 그룹화하기
• Mesh 들을 그룹화 함 (예를들어 로봇의 몸+팔+다리 를 하나로~)

지구/태양/달의 움직임을 만들어보기

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
  color: 'hotpink',
});

// 태양
const sunGroup = new THREE.Group();
const sun = new THREE.Mesh(geometry, material);

// 지구
const earthGroup = new THREE.Group();
const earth = sun.clone(); 
// 태양보다 작으니까 크기 좀 줄여줌
earth.scale.set(0.3, 0.3, 0.3);
// 태양과 겹쳐있지 않게 약간의 위치 조절 
earthGroup.position.x = 2;

// 달
const moonGroup = new THREE.Group();
const moon = earth.clone();
moon.scale.set(0.15, 0.15, 0.15);
moon.position.x = 0.5;

// 달 그룹에 달 부착
moonGroup.add(moon);
// 지구 그룹에 지구, 달 그룹 부착
earthGroup.add(earth, moonGroup);
// 태양 그룹에 태양, 지구 그룹 부착
sunGroup.add(sun, earthGroup);
// 무대에 태양 부착
scene.add(sunGroup);

// 회전
function draw(): void {
  const delta = clock.getDelta();

  sunGroup.rotation.y += delta;
  earthGroup.rotation.y += delta;
  moonGroup.rotation.y += delta;

  renderer.render(scene, camera);
  renderer.setAnimationLoop(draw);
}

draw()

• 자세히 보면 각각 자기가 돌면서 + 그룹으로도 돌고있다.