[Three.js] GIS Developer 님의 Three.js 강좌

GIS Developer 님의 Three.js 강좌 : https://www.youtube.com/watch?v=ITA9no8Bsio

지오메트리 (Geometry)

: 3차원 오브젝트의 형상을 정의

Three.js 에서 제공하는 기본 지오메트리

: 지오메트리는 기본적으로 BufferGeometry 를 상속받고 있다.

* BufferGeometry

- BoxGeometry : 가로, 세로, 깊이에 대한 크기와 가로, 세로, 깊이 각각에 대한 분할(Segments) 수로 정의된다. (분할은 LineBasicMaterial을 통해 시각적으로 확인 가능)
- CircleGeometry : 원판의 크기인 반지름, 원판을 구성하는 분할 개수, 시작 각도, 연장 각도를 인자로 받는다.
- ConeGeometry : 밑면에 해당되는 원의 반지름 크기, 원뿔의 높이, 원뿔 밑면의 분할 개수, 원뿔 높이 방향에 대한 분할 개수, 원뿔 밑면을 열어 놓을 것인지에 대한 여부, 원뿔의 시작 각, 연장 각을 인자로 받는다.
- CylinderGeometry : 윗면의 반지름 크기, 밑면의 반지름 크기, 원기둥의 높이, 원기둥 둘레 방향에 대한 분할 개수, 원기둥의 높이 방향에 대한 분할 개수, 원기둥의 윗면과 밑면을 열어 놓을 것인지에 대한 여부, 원기둥의 시작 각, 연장 각을 인자로 받는다.

- SphereGeometry : 구의 반지름 크기, 수평 방향에 대한 분할 수, 수직 방향에 대한 분할 수, 수평 방향에 대한 구의 시작 각, 연장 각, 수직 방향에 대한 구의 시작 각, 연장 각을 인자로 받는다.

- RingGeometry : 2차원 반지 형태의 지오메트리. 내부 반지름 크기, 외부 반지름 크기, 가장 자리 둘레 방향에 대한 분할 수, 내부 방향에 대한 분할 수, 시작 각, 연장 각을 인자로 받는다.

- PlaneGeometry : 평면 모양의 사각형 지오메트리. GIS에서 3차원 지형들을 표현하는데 유용하게 사용 됨. 너비에 대한 길이, 높이에 대한 길이, 너비 방향에 대한 분할 수, 높이 방향에 대한 분할 수를 인자로 받는다.

- TorusGeometry : 3차원 반지 형태의 지오메트리. 토러스의 반지름 크기, 토러스 원통의 반지름 크기, 토러스의 방사 방향에 대한 분할 수, 토러스 원통에 대한 분할 수, 연장 각을 인자로 받는다.

- TorusKnotGeometry : 토러스 낫은 활용도가 낮다. 토러스낫의 반지름 크기, 토러스낫 원통의 반지름 크리, 분할 수, 분할 수, 토러스낫의 반복 수, 토러스 낫의 반복 수를 인자로 받는다.

- ShapeGeometry : shape 도형을 메쉬의 형태로 생성한다. shape 클래스의 객체, 분할 수를 인자로 받는다.

- TubeGeometry : curve 클래스의 객체, 튜브의 진행 방향에 대한 분할 수, 튜브의 원통에 대한 반지름 크기, 원통에 대한 분할 수, 튜브의 시작과 끝을 닫을지에 대한 여부

- LatheGeometry : 축을 대칭으로 이어지는 지오메트리. 회전시킬 대상에 대한 좌표 배열, 분할 수, 시작 각, 연장 각을 인자로 받는다.

- ExtrudeGeometry : 평면 shape 에 깊이 값을 부여하고 mesh의 윗 면과 밑 면을 비스듬하게 처리(베벨링)하는 지오메트리. shape 클래스의 객체, 깊이 방향에 대한 분할 수, 깊이 값, 베벨링 처리를 할 것인지에 대한 여부, 베벨링에 대한 두께, shape의 외곽선으로부터 얼마나 멀리 베벨링 할 것인지에 대한 크기, 베벨링 단계 수를 인자로 받는다.

- TextGeometry : ExtrudeGeometry 의 파생 클래스. 3차원 mesh로 생성할 문자열, fontLoader를 통해 얻어온 폰트 객체, text 메쉬의 크기, 깊이 값, 하나의 커브를 구성하는 정점의 개수, 베벨링 처리를 할 것인지에 대한 여부, 베벨링에 대한 두께, shape의 외곽선으로부터 얼마나 멀리 베벨링 할 것인지에 대한 크기, 베벨링 단계 수를 인자로 받는다.
- WireframeGeometry : 와이어프레임 형태로 지오메트리를 표현한다.

- ParametricGeometry : 수학적 함수식에 2개의 값을 입력하여 얻을 수 있는 좌표로 구성되는 지오메트리다.

- EdgesGeometry : 지오메트리를 구성하는 인접면의 각도에 따라 지오메트리를 재구성한다.

- PolyhedronGeometry : 다면체를 구성하는 지오메트리다.

- IcosahedronGeometry : PolyhedronGeometry 를 상속받는 20면체 지오메트리

- OctahedronGeometry : PolyhedronGeometry 를 상속받는 8면체 지오메트리

- DodecahedronGeometry : PolyhedronGeometry 를 상속받는 12면체 지오메트리

- TetrahedronGeometry : PolyhedronGeometry 를 상속받는 4면체 지오메트리

지오메트리 형상을 정의하기 위한 데이터

: 이 데이터들은 3차원으로 시각화될 때 GPU에 한번에 전달되어 빠르게 처리된다.

- 정점(Vertex) : xyz 축에 대한 좌표

- 정점 인덱스(Vertex Index) : 3차원 오브젝트의 면을 구성

- 수직 벡터(Normal Vector) : 정점에 대한 수직 벡터

- 정점 색상(Vertex Color)

- 텍스처 맵핑을 위한 UV 좌표

- 사용자 정의 데이터

// 02-geometry.js
import * as THREE from '../build/three.module.js';
import {OrbitControls} from '../examples/jsm/controls/OrbitControls.js';
import {FontLoader} from "../examples/jsm/loaders/FontLoader.js"
import {TextGeometry} from "../examples/jsm/geometries/TextGeometry.js"

class App {
	constructor() {
		const divContainer = document.querySelector('#webgl-container');
		this._divContainer = divContainer;

		const renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.setPixelRatio(window.devicePixelRatio);
		divContainer.appendChild(renderer.domElement);
		this._renderer = renderer;

		const scene = new THREE.Scene();
		this._scene = scene;

		this._setupCamera();
		this._setupLight();
		this._setupModel();
		/* 마우스 컨트롤 추가 */
		this._setupControls();

		window.onresize = this.resize.bind(this);
		this.resize();

		requestAnimationFrame(this.render.bind(this));
	}

	_setupControls() {
		/* new OrbitControls(카메라 객체, 마우스 이벤트를 받는 DOM 요소) */
		new OrbitControls(this._camera, this._divContainer);
	}

	_setupCamera() {
		const width = this._divContainer.clientWidth;
		const height = this._divContainer.clientHeight;
		const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
		camera.position.x = -15;
		camera.position.z = 15;
		this._camera = camera;
	}

	_setupLight() {
		const color = 0xffffff;
		const intensity = 1;
		const light = new THREE.DirectionalLight(color, intensity);
		light.position.set(-1, 2, 4);
		this._scene.add(light);
	}

	_setupModel() {
		//const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
		//const geometry = new THREE.CircleGeometry(1, 8, 0, Math.PI * 2);
		//const geometry = new THREE.ConeGeometry(1, 1, 8, 1, false, 0, Math.PI * 2);
		//const geometry = new THREE.CylinderGeometry(1, 1, 1, 8, 1, false, 0, Math.PI * 2);
		//const geometry = new THREE.SphereGeometry(1, 32, 16, 0, Math.PI * 2, 0, Math.PI);
		//const geometry = new THREE.RingGeometry(0.5, 1, 8, 1, 0, Math.PI * 2);
		//const geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
		//const geometry = new THREE.TorusGeometry(1, 0.4, 8, 6, Math.PI * 2);
		//const geometry = new THREE.TorusKnotGeometry(1, 0.4, 64, 8, 2, 3);

		// ShapeGeometry
		/* const shape = new THREE.Shape();
		const x = -2.5, y = -5;
		shape.moveTo(x + 2.5, y + 2.5);
		shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
		shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
		shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
		shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
		shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
		shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);
		const geometry = new THREE.ShapeGeometry(shape); */

		// TubeGeometry
		/* class CustomSinCurve extends THREE.Curve {
			constructor(scale = 1) {
				super();
				this.scale = scale;
			}
			getPoint(t) {
				const tx = t * 3 - 1.5;
				const ty = Math.sin(2 * Math.PI * t);
				const tz = 0;
				return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
			}
		}
		// 튜브가 이어지는 형태를 결정하기 위한 curve 객체 생성
		const path = new CustomSinCurve(4);
		const geometry = new THREE.TubeGeometry(path, 64, 1, 8, false); */

		// LatheGeometry
		/* const points = [];
		for (let i = 0; i < 10; ++i) {
			points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * 0.8));
		}
		const geometry = new THREE.LatheGeometry(points, 12, 0, Math.PI * 2); */

		// ExtrudeGeometry
		/* const x = -2.5, y = -5;
		const shape = new THREE.Shape();
		shape.moveTo(x + 2.5, y + 2.5);
		shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
		shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
		shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
		shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
		shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
		shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

		const settings = {
			steps: 1,
			depth: 4,
			bevelEnabled: false,
			bevelThickness: 0.1,
			bevelSize: 0.1,
			bevelSegments: 1,
		}

		const geometry = new THREE.ExtrudeGeometry(shape, settings); */

		//TextGeometry
		// TTF 등과 같은 폰트 파일을 Three.js에서 폰트로 사용할 수 있는 포맷으로 변경해서 사용함 (json)
		// 폰트를 로드
		const fontLoader = new FontLoader();
		// 폰트 데이터를 비동기적으로 불러옴
		async function loadFont(that) {
			const url = '../examples/fonts/helvetiker_regular.typeface.json';
			const font = await new Promise((resolve, reject) => {
				fontLoader.load(url, resolve, undefined, reject);
			});

			const geometry = new TextGeometry('Three', {
				font: font,
				size: 5,
				height: 1.5,
				curveSegments: 4,
				// setting for ExtrudeGeometry
				bevelEnabled: true,
				bevelThickness: 0.7,
				bevelSize: 0.7,
				bevelSegments: 2,
			});

			// 비동기 함수 내부에서 geometry 를 생성하고 있기 때문에 기존의 모든 코드도 비동기 함수 내부에서 호출해야함
			const fillMaterial = new THREE.MeshPhongMaterial({color: 0x515151});
			const cube = new THREE.Mesh(geometry, fillMaterial);

			const lineMaterial = new THREE.LineBasicMaterial({color: 0xffff00});
			const line = new THREE.LineSegments(new THREE.WireframeGeometry(geometry), lineMaterial);

			const group = new THREE.Group();
			group.add(cube);
			group.add(line);

			that._scene.add(group);
			that._cube = group;
		}
		loadFont(this);


		/* // 회색 색상의 재질
		const fillMaterial = new THREE.MeshPhongMaterial({color: 0x515151});
		// mesh 타입의 오브젝트 생성
		const cube = new THREE.Mesh(geometry, fillMaterial);

		// 노란색 선에 대한 재질
		const lineMaterial = new THREE.LineBasicMaterial({color: 0xffff00});
		// line 타입의 오브젝트 생성
		const line = new THREE.LineSegments(new THREE.WireframeGeometry(geometry), lineMaterial);

		const group = new THREE.Group();
		group.add(cube);
		group.add(line);

		this._scene.add(group);
		this._cube = group; */
	}

	/* _setupModel() {
		// shape method
		const shape = new THREE.Shape();
		const x = -2.5, y = -5;
		shape.moveTo(x + 2.5, y + 2.5);
		shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
		shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
		shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
		shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
		shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
		shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

		const geometry = new THREE.BufferGeometry();
		const points = shape.getPoints();
		geometry.setFromPoints(points);

		const material = new THREE.LineBasicMaterial({color: 0xffff00});
		const line = new THREE.Line(geometry, material);

		this._scene.add(line);
	} */

	/* _setupModel() {
		// curve class
		// 커브를 t 매개변수 방정식으로 정의
		class CustomSinCurve extends THREE.Curve {
			constructor(scale = 1) {
				super();
				this.scale = scale;
			}
			getPoint(t) {
				const tx = t * 3 - 1.5;
				const ty = Math.sin(2 * Math.PI * t);
				const tz = 0;
				return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
			}
		}

		const path = new CustomSinCurve(4);

		const geometry = new THREE.BufferGeometry();
		// getPoints : 커브를 구성하는 좌표의 개수를 인자로 받는다. 값이 높을 수록 더 부드러운 곡선을 얻는다.
		const points = path.getPoints(10);
		geometry.setFromPoints(points);

		const material = new THREE.LineBasicMaterial({color: 0xffff00});
		const line = new THREE.Line(geometry, material);

		this._scene.add(line);
	} */

	/* _setupModel() {
		const points = [];
		for (let i = 0; i < 10; ++i) {
			points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * 0.8));
		}

		const geometry = new THREE.BufferGeometry();
		geometry.setFromPoints(points);

		const material = new THREE.LineBasicMaterial({color: 0xffff00});
		const line = new THREE.Line(geometry, material);

		this._scene.add(line);
	} */

	resize() {
		const width = this._divContainer.clientWidth;
		const height = this._divContainer.clientHeight;

		this._camera.aspect = width / height;
		this._camera.updateProjectionMatrix();

		this._renderer.setSize(width, height);
	}

	render(time) {
		this._renderer.render(this._scene, this._camera);
		this.update(time);
		requestAnimationFrame(this.render.bind(this));
	}

	update(time) {
		time *= 0.001;

		//this._cube.rotation.x = time;
		//this._cube.rotation.y = time;
	}
}

window.onload = function() {
	new App();
}

씬 그래프(Scene Graph)를 이용한 공간구성

Objct3D 의 파생 클래스

: 3차원 객체는 3차원 공간 상에 놓이게 된다.

- Mesh : 3각형 면으로 구성된 객체를 표현

- Line : 선형 객체를 표현

- Points : 점을 표현

Objct3D 의 속성

: 3차원 객체가 3차원 공간 상에 놓여지기 위해서는 위치, 회전, 크기 값이 필요하다.

: 이 값은 4x4 크기의 행렬 정보로 변환된다.

- position : xyz 축에 대한 위치값

- rotation : xyz 축에 대한 회전값

- scale : xyz 축에 대한 크기의 배수값

씬 그래프(Scene Graph)

: 3차원 공간 상의 장면 구성

: 씬 그래프를 이용하면 3차원 객체를 원하는 공간 상에 구성하기 위해 복잡한 수학식을 사용하지 않아도 된다.

// 03-scenegraph.js
import * as THREE from '../build/three.module.js';

class App {
	constructor() {
		const divContainer = document.querySelector('#webgl-container');
		this._divContainer = divContainer;

		const renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.setPixelRatio(window.devicePixelRatio);
		divContainer.appendChild(renderer.domElement);
		this._renderer = renderer;

		const scene = new THREE.Scene();
		this._scene = scene;

		this._setupCamera();
		this._setupLight();
		this._setupModel();

		window.onresize = this.resize.bind(this);
		this.resize();

		requestAnimationFrame(this.render.bind(this));
	}

	_setupCamera() {
		const width = this._divContainer.clientWidth;
		const height = this._divContainer.clientHeight;
		const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
		camera.position.z = 50;
		this._camera = camera;
	}

	_setupLight() {
		const color = 0xffffff;
		const intensity = 1;
		const light = new THREE.DirectionalLight(color, intensity);
		light.position.set(-1, 2, 4);
		this._scene.add(light);
	}

	_setupModel() {
		/* Object3D 타입의 태양 객체 생성 */
		const solarSystem = new THREE.Object3D();
		this._scene.add(solarSystem);

		/* 구 모양의 geometry 생성 */
		const radius = 1;
		const widthSegment = 12;
		const heightSegment = 12;
		const sphereGeometry = new THREE.SphereGeometry(radius, widthSegment, heightSegment);

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

		/* 태양 mesh를 태양 객체에 추가 */
		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: 0x2223ff, emissive: 0x111244, flatShading: true});
		const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
		/* 태양 객체로 부터 10만큼 떨어진 곳에 배치 */
		earthOrbit.position.x = 10;
		earthOrbit.add(earthMesh);

		/* 달 */
		const moonOrbit = new THREE.Object3D();
		/* 달 객체는 지구 객체의 자식이므로 지구를 기준으로 2만큼 떨어진 곳에 배치됨 (태양 기준 12) */
		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);

		/* 다른 메서드에서 참조 할 수 있도록 field 화 */
		this._solarSystem = solarSystem;
		this._earthOrbit = earthOrbit;
		this._moonOrbit = moonOrbit;
	}

	resize() {
		const width = this._divContainer.clientWidth;
		const height = this._divContainer.clientHeight;

		this._camera.aspect = width / height;
		this._camera.updateProjectionMatrix();

		this._renderer.setSize(width, height);
	}

	render(time) {
		this._renderer.render(this._scene, this._camera);
		this.update(time);
		requestAnimationFrame(this.render.bind(this));
	}

	update(time) {
		time *= 0.001; // second unit

		/* 태양 객체를 y 축을 기준으로 회전 : 지구와 달도 태양을 중심으로 회전 */
		this._solarSystem.rotation.y = time / 2;

		this._earthOrbit.rotation.y = time * 2;
		this._moonOrbit.rotation.y = time * 5;
	}
}

window.onload = function() {
	new App();
}

저작자표시

[Three.js] GIS Developer 님의 Three.js 강좌 - 2

지오메트리 (Geometry)

씬 그래프(Scene Graph)를 이용한 공간구성

티스토리툴바