Scene Graph(씬 그래프)

개요

Three.js에서 사람의 팔을 상완, 전완, 손 이렇게 3개의 매쉬만들어서 구현한 상태이다.

사람의 팔을 움직이는 애니메이션을 구현하고자 하면, 상완 회전 및 이동, 전완 회전 및 이동, 손 회전 및 이동을 시키는 방식으로 움직이는 애니메이션을 구현해야 한다. 생각만 해도 계산해야 할 것들이 많아진다...살려줘

아래 그림은 피그마에서 그룹화를 하지 않고 예시이다.

만약에 상완, 하완, 손을 구성하는 매쉬들이 하나의 그룹처럼 이루어져 있으면 그룹하나만 회전 및 이동을하면 간단하게 해결이 된다. 이때 사용하는 것이 씬 그래픽이다.

아래 그림은 피그마에서 그룹화를 했을때 예시이다.

확실히 그룹화를 했을때 회전 및 이동이 쉬운것을 확인할 수 있다. 이제 이것을 Three.js에서 어떻게 처리를 해야하는지 실습을 해보겠다.

실습

실습의 내용은 태양, 지구, 달이 공전과 자전하는 것을 예시로 진행한다.

메인 그룹 회전

첫번째는 태양 그룹을 태양 그룹을 회전을 시키는 예시이다.

/**생략**/
  // 태양 매쉬 및 그룹 생성
  const sunGroup = new THREE.Group();
  const sunBox = new THREE.Mesh(geometry, material);

  // 지구 매쉬 및 그룹 생성
  const earthGroup = new THREE.Group();
  const earthBox = sunBox.clone();
  earthBox.material = sunBox.material.clone();
  earthBox.material.color.setRGB(0, 0, 255);
  earthBox.scale.set(0.3, 0.3, 0.3);
  earthGroup.position.x = 2;

  // 달 매쉬 및 그룹 생성
  const moonGroup = new THREE.Group();
  const moonBox = earthBox.clone();
  moonBox.material = sunBox.material.clone();
  moonBox.material.color.setRGB(0, 255, 0);
  moonBox.scale.set(0.15, 0.15, 0.15);
  moonGroup.position.x = 0.5;

  // 각 그룹에 매쉬 등록 및 그룹끼리 등록
  moonGroup.add(moonBox);
  earthGroup.add(earthBox, moonGroup);
  sunGroup.add(sunBox, earthGroup);
  scene.add(sunGroup);

  function draw() {
    const delta = clock.getDelta();
    // 태양 회전
    sunGroup.rotation.y += delta;

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

  draw();

결과

모든 그룹 회전

두번째는 모든 그룹을 회전시키는 예시이다.
이는 우리가 알고있는 태양, 지구, 달이 공전과 자전을 하는 형태를 확인할 수 있다.

/**생략**/
  function draw() {
    const delta = clock.getDelta();
    // 태양 회전
    sunGroup.rotation.y += delta;
    earthGroup.rotation.y += delta;
    moonGroup.rotation.y += delta;

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

  draw();

결과

사실 씬 그래프는 우리가 Figma나 PPT에서 그룹화할 때 사용하고 있었다는 사실...