그룹 만들기(Scene Graph)

 

태양과 지구와 달의 자전과 공전 움직임을 그룹을 이용해 만들어보기

 

box1 = 태양, box2 = 지구, box3 = 달

• 지구가 자전하면서 지구는 태양을 두고 공전한다.
• 달은 자기 자체도 자전, 자전을 하면서 지구 주의를 또 도는 공전

 

 

import * as THREE from "three";
import dat from "dat.gui";

/* 주제: 그룹 만들기(Scene Graph) */

export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  /* Scene 만들기 */
  const scene = new THREE.Scene();

  /* Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 0;
  camera.position.z = 4;
  scene.add(camera);

  /* Light 만들기 */
  const ambientLight = new THREE.AmbientLight("white", 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight("white", 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({
    color: "red"
  });

  /* Group 만들기 */
  const group1 = new THREE.Group();
  const box1 = new THREE.Mesh(geometry, material);

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

  const group3 = new THREE.Group();
  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);

  // Dat GUI
  const gui = new dat.GUI();
  gui.add(camera.position, "x", -5, 5, 0.1).name("카메라 X");
  gui.add(camera.position, "y", -5, 5, 0.1).name("카메라 Y");
  gui.add(camera.position, "z", 2, 10, 0.1).name("카메라 Z");

  /* 그리기 */
  const clock = new THREE.Clock();

  function draw() {
    const delta = clock.getDelta();

    group1.rotation.y += delta;
    group2.rotation.y += delta;
    group3.rotation.y += delta;

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

  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  /* 이벤트 */
  window.addEventListener("resize", setSize);

  draw();
}

 

 

설명

  /* Group 만들기 */
  const group1 = new THREE.Group();
  const box1 = new THREE.Mesh(geometry, material);

  const group2 = new THREE.Group();
  // box1를 복제 후 크기를 더 작게 변경, 위치 이동
  const box2 = box1.clone();
  box2.scale.set(0.3, 0.3, 0.3);
  group2.position.x = 2;

  const group3 = new THREE.Group();
  const box3 = box2.clone();
  // box2를 복제 후 크기를 더 작게 변경, 위치 이동
  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);

 

 

const group2 = new THREE.Group();
const box2 = box1.clone();

.clone()

• 그대로 복제해서 같은 메쉬 만들기
• THREE.Group() 대신 THREE.Object3D() 해도 된다.