ThreeJs (3) Scene Graph

복습 ++추가 내용

Geometry는 material과 함께 mesh를 구성하는 요소이다.
3차원 객체의 형상 등을 정의한다.

material은 3차원 객체의 색상이나 투명도 등을 정의한다.

mesh는 3차원 객체를 화면에 표시하기 위한 클래스이며 Object3D의 파생 클래스이다.
Object3D의 파생 클래스에는 Line, Points 등이 있다.
mesh는 3각형 면으로 구성된 객체를 표현
line은 선형 객체를 표현
points는 점을 표현

Object3D - Mesh, Line, Points에 대한 3차원 객체는 3차원 공간 상에 놓여지게 된다.
3D Object가 3차원 공간 상에 놓여지기 위해서는 위치, 회전, 크기 값이 필요하다.
Object3D에는 position, rotation, scale이라는 속성을 갖는다.

• position은 xyz 축에 대한 위치값으로 기본값은 모두 0
• rotation은 xyz 축에 대한 회전값으로 기본값은 position과 마찬가지로 모두 0
• scale은 xyz축에 대한 크기의 배수값으로 기본값은 모두 1이며 이 값은 원래 크기를 의미
• position, rotation, scale은 4x4크기의 행렬 정보로 변환된다.

ThreeJS xyz 좌표구성

모니터를 기준으로

• x축은 화면의 오른쪽이 플러스 왼쪽이 마이너스
• y축은 위쪽이 플러스 아래쪽이 마이너스
• z축은 모니터의 바깥 방향이 플러스 안쪽 방향이 마이너스

Scene Graph

3차원 공간 상의 장면 구성

_setupModel() {
		// Solarsystem 객체를 생성하고 scene에 추가
		const solarSystem = new THREE.Object3D();
		this._scene.add(solarSystem);

		//구 모모양양의 지오메트리 생성
		const radius = 1;
		const widthSegments = 12;
		const heightSegments = 12;
		const spherGeometry = new THREE.SphereGeometry(
			radius,
			widthSegments,
			heightSegments
		);

		//태양재질생성
		const sunMaterial = new THREE.MeshPhongMaterial({
			emissive: 0xffff00,
			flatShading: true,
		});

		//지오메트리와 태양에 대한 재질을 이용해 sunMesh 객체를 생성하고 scene graph의 내용대로 solarSystem 에 추가
		const sunMesh = new THREE.Mesh(spherGeometry, sunMaterial);
		sunMesh.scale.set(3, 3, 3); //지오메트리가 갖는 크기보다 xyz축에 대해 3배의 크기로 표시
		solarSystem.add(sunMesh);

		// object3d타입의 earthOrbit 객체 생성
		const earthOrbit = new THREE.Object3D();
		solarSystem.add(earthOrbit);

		//지구에 대한 재질 추가
		const earthMaterial = new THREE.MeshPhongMaterial({
			color: 0x2233ff,
			emissive: 0x112244,
			flatShading: true,
		});

		//mesh 타입의 earthMesh 객체 생성 후 earthOrbit 자식으로 추가
		const earthMesh = new THREE.Mesh(spherGeometry, earthMaterial);
		earthOrbit.position.x = 10;
		earthOrbit.add(earthMesh);

		// Object3D 타입의 moonOrbit 객체를 생성하고 moonOrbit 객체를 earthOrbit에 자식으로 추가
		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(spherGeometry, moonMaterial);
		moonMesh.scale.set(0.5, 0.5, 0.5); //0.5, 원래 구의 반지름의 크기에 대해 절반으로 달이 표현
		moonOrbit.add(moonMesh);

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

[출처]https://threejs.org/
https://www.youtube.com/watch?v=nKK7L6QLjkg&list=PLe6NQuuFBu7HqxY10b6gNu6iisT2-rZv-&index=5