Three.js - Scene Graph를 이용한 공간 구성

Object3D

Object3D의 파생 클래스

Mesh

삼각형 면으로 구성된 객체

Line

선형 객체

• Line: 시작점부터 끝점까지 한번에 이어짐
• LineSegments: 시작점부터 두개씩 짝지어 이어짐
• LineLoop: 시작점 - 끝점 - 시작점으로 연결됨

Points

점

Object3D의 속성 => 4x4크기의 행렬 정보로 변환됨

position

x, y, z축에 대한 위치값
default: 0

rotation

x, y, z축에 대한 회전값
default: 0

scale

x, y, z축에 대한 크기의 배수값
default: 1 (1배)

 _setupModel() {
    const solarSystem = new THREE.Object3D();
    this._scene.add(solarSystem);

    const radius = 1;
    const widthSegments = 12;
    const heightSegments = 12;
    const sphereGeometry = new THREE.SphereGeometry(
      radius,
      widthSegments,
      heightSegments
    );

    const sunMaterial = new THREE.MeshPhongMaterial({
      emissive: 0xffff00,
      flatShading: true,
    });
    const earthMaterial = new THREE.MeshPhongMaterial({
      color: 0x2233ff,
      emissive: 0x112244,
      flatShading: true,
    });
    const moonMaterial = new THREE.MeshPhongMaterial({
      color: 0x2233ff,
      emissive: 0x112244,
      flatShading: true,
    });

    const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
    sunMesh.scale.set(3, 3, 3);
    solarSystem.add(sunMesh);

    const earthOrbit = new THREE.Object3D();
    solarSystem.add(earthOrbit);
    const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
    earthOrbit.position.x = 10;
    earthOrbit.add(earthMesh);

    const moonOrbit = new THREE.Object3D();
    const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);
    moonMesh.scale.set(0.5, 0.5, 0.5);
    moonOrbit.position.x = 2;
    moonOrbit.add(moonMesh);
    earthOrbit.add(moonOrbit);

    this._solarSystem = solarSystem;
    this._earthOrbit = earthOrbit;
    this._moonOrbit = moonOrbit;
  }

  update(time) {
    time *= 0.001;
    this._solarSystem.rotation.y = time / 2; // 태양자전, 지구 공전
    this._earthOrbit.rotation.y = time * 2; // 지구 자전
    this._moonOrbit.rotation.y = time * 5; // 달 자전
  }