Three.js Scene Graph(씬그래프)

* https://threejs.org/manual/#ko/scenegraph 을 참고하였습니다.

* 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다.

 

Object 3D에는 Mesh, Line, Points로 분류되어있습니다.

Mesh는 삼각형면으로 구성된 객체, Line는 선형 객체, Points는 점 합쳐서 3차원 공간상에 놓입니다.

Object 3D가 3차원 공간상에 놓이기 위해서는 Position(위치), Rotation(회전), Scale(크기) 값이 필요.

Position은기본값은 0,

Rotation은 기본값은 0, Scale은 기본값은 1

씬 그래프(scene graph) 구조

 

밑에 코드는 씬그래프의 예제 코드이다.

_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 sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
    sunMesh.scale.set(3, 3, 3); // 태양의 크기를 키움
    solarSystem.add(sunMesh);

    const earthOrbit = new THREE.Object3D();
    solarSystem.add(earthOrbit);

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

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

    const moonOrbit = new THREE.Object3D();
    moonOrbit.position.x = 2;
    earthOrbit.add(moonOrbit);

    const moonMaterial = new THREE.MeshPhongMaterial({
        color: 0x888888,
        emissive: 0x222222,
        flatShading: true,
    });

    const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial);
    moonMesh.scale.set(0.5, 0.5, 0.5);
    moonOrbit.add(moonMesh);
}

해당 코드를 보면은 solarSystem이라는 Object3D를 생성 했고, SphereGeometry로 원을 공통적으로 만들었습니다.

그리고, 각각의 행성에는 다른 Material값을 줘서 서로 색상을 다르게 했습니다.

solarSystem의 Object 3D를 scene에 등록을 하였고, solarSystem에 earthOrbit의 Object 3D를 등록 하였고,

earthOrbit에 moonOrbit을 등록했습니다. 

scene > solarSystem(Object3D) > sunMesh + earthOrbit  > earthMesh + moonOrbit > moonMesh 순입니다.

부모인 Object 3D에 회전을 주면은 자식 Object 3D는 부모 기준으로 회전을 합니다.

그리고 Object 3D의 position은 자식의 부모의 좌표값 기준으로 해당하는 좌표값으로 이동합니다.

Mesh에 scale을 설정하여 크기를 조작이 가능합니다.