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

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

사용자 정의 지오메트리(Custom Geometry)

: 복잡한 형상을 만들 수 있다.

BufferGeometry 에 대해 정의할 수 있는 속성

- position : geometry를 구성하는 3차원 좌표에 대한 정점(Vertex)

- normal : 각 정점에 대한 수직 벡터

- color : 각 정점에 대한 색상값

- uv : 각 정점에 대한 텍스쳐 매핑 좌표

- Vertex Index는 setIndex 메서드로 지정 : position 속성으로 지정된 정점에 대한 인덱스 배열로 지정.

ex) mesh를 구성하는 면의 최소 단위는 삼각형이고 이 삼각형은 3개의 정점으로 구성된다. 이 3개의 정점에 대한 position 속성에서의 정점 인덱스 번호가 Vertex Index다.

여기서 삼각형을 구성하는 정점의 배치 순서는 반시계 방향이여야 한다. 반시계 방향인 면이 앞면이기 때문이다.

그리고 모든 정점에 대한 법선 벡터를 지정해야한다.

* 법선벡터 : 광원이 mesh의 표면에 비추는 입사각과 반사각을 계산하여 재질과 함께 표면의 색상을 결정하는데 사용됨

// 05-custom-geometry.js
import * as THREE from '../build/three.module.js';
import {OrbitControls} from '../examples/jsm/controls/OrbitControls.js';
import {VertexNormalsHelper} from '../examples/jsm/helpers/VertexNormalsHelper.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(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.z = 2;
		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 rawPositions = [
			-1, -1, 0,
			1, -1, 0,
			-1, 1, 0,
			1, 1, 0,
		];

		// 법선 배열에 대한 배열 데이터
		const rawNormals = [
			0, 0, 1, // mesh의 면으로 봤을 때 면에 대한 수직인 벡터 0,0,1
			0, 0, 1,
			0, 0, 1,
			0, 0, 1,
		];

		// 정점에 대한 색상값 지정
		const rawColors = [
			1, 0, 0,
			0, 1, 0,
			0, 0, 1,
			1, 1, 0,
		];

		// 텍스쳐 맵핑
		const rawUvs = [
			0, 0, // 이미지의 좌측 하단 위치로 geometry의 정점 좌표 (-1, -1, 0)에 맵핑
			1, 0,
			0, 1,
			1, 1,
		];

		const positions = new Float32Array(rawPositions);
		const normals = new Float32Array(rawNormals);
		const colors = new Float32Array(rawColors);
		const uvs = new Float32Array(rawUvs);

		const geometry = new THREE.BufferGeometry();
		geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
		geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));
		geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
		geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));

		// 법선 벡터를 자동으로 계산해주는 메서드 대신 rawNormals 로 직접 지정해주었다.
		//geometry.computeVertexNormals();

		// vertax index 는 삼각형 면을 정의함. 사각형은 두 개의 삼각형으로 이루어져 있다.
		geometry.setIndex([
			0, 1, 2,
			2, 1, 3,
		]);
		
		const textureLoader = new THREE.TextureLoader();
		const map = textureLoader.load('../examples/textures/uv_grid_opengl.jpg');

		// vertexColor : 각 버텍스에 지정된 색상대로 mesh를 표현할것인지에 대한 여부
		const material = new THREE.MeshPhongMaterial({
			color: 0xffffff,
			vertexColors: true,
			map: map,
		});

		const box = new THREE.Mesh(geometry, material);
		this._scene.add(box);

		const helper = new VertexNormalsHelper(box, 0.1, 0xffff00);
		this._scene.add(helper);
	}

	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
	}
}

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

광원(Light)

Light를 상속받는 클래스

환경광 또는 주변광

- AmbientLight : 단순히 scene에 존재하는 모든 물체에 대해서 단일 색상으로 렌더링한다. 대부분의 경우 세기값을 아주 약하게 지정해서 광원의 영향을 받지 못하는 물체도 살짝 보여지도록 하는데 사용된다.
- HemisphereLight : AmbientLight 와 다르게 빛의 색상이 2개다.

빛의 방향성을 가지는 광원
- DirectionalLight : 태양처럼 빛과 물체간의 거리에 상관없이 동일한 빛의 효과. 빛의 position과 target 속성으로 결정되는 방향만이 의미가 있다.
- PointLight : 빛이 광원의 위치에서 사방으로 퍼져나감.
- SpotLight : 빛이 관원의 위치에서 깔대기 모양으로 퍼져나감.
- RectAreaLight : 형광등이나 창문에서 들어오는 광원.

* 실제로는 보다 나은 렌더링 결과를 위해 여러 종류의 광원을 2개 이상 설치하여 사용한다.

// 06-light.js
import * as THREE from '../build/three.module.js';
import {OrbitControls} from '../examples/jsm/controls/OrbitControls.js';
import {RectAreaLightUniformsLib} from '../examples/jsm/lights/RectAreaLightUniformsLib.js';
import {RectAreaLightHelper} from '../examples/jsm/helpers/RectAreaLightHelper.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(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.z = 2;
		camera.position.set(7, 7, 0);
		// 카메라가 원점인 0, 0, 0을 바라보게 설정
		camera.lookAt(0, 0, 0);
		this._camera = camera;
	}

	_setupLight() {
		// AmbientLight(빛의 색상, 세기)
		//const light = new THREE.AmbientLight(0xffffff, 5);

		// HemisphereLight(위에서 비치는 색상, 아래에서 비치는 색상, 세기)
		//const light = new THREE.HemisphereLight('#b0d8f5', '#bb7a1c', 1);

		// DirectionalLight
		/* const light = new THREE.DirectionalLight(0xffffff, 1);
		light.position.set(0, 5, 0);
		light.target.position.set(0, 0, 0);
		this._scene.add(light.target);

		// 광원의 시각화
		const helper = new THREE.DirectionalLightHelper(light);
		this._scene.add(helper);
		this._lightHelper = helper; */

		// PointLight 
		/* const light = new THREE.PointLight(0xffffff, 2);
		light.position.set(0, 5, 0);
		// distance : 지정된 거리까지만 광원의 영향을 받음. 0은 무한
		light.distance = 0;

		// 광원의 시각화
		const helper = new THREE.PointLightHelper(light);
		this._scene.add(helper);
		this._lightHelper = helper; */

		// SpotLight 
		/* const light = new THREE.SpotLight(0xffffff, 1);
		light.position.set(0, 5, 0);
		light.target.position.set(0, 0, 0);
		light.angle = THREE.Math.degToRad(40);
		// penumbra : 빛의 감쇄율
		light.penumbra = 0;
		this._scene.add(light.target);

		// 광원의 시각화
		const helper = new THREE.SpotLightHelper(light);
		this._scene.add(helper);
		this._lightHelper = helper; */

		// RectAreaLight (색상, 세기, 가로 크기, 세로 크기)
		RectAreaLightUniformsLib.init();
		const light = new THREE.RectAreaLight(0xffffff, 10, 6, 1);
		light.position.set(0, 5, 0);
		light.rotation.x = THREE.Math.degToRad(-90);

		// 광원의 시각화
		const helper = new RectAreaLightHelper(light);
		this._scene.add(helper);
		this._lightHelper = helper;

		this._scene.add(light);
		this._light = light;
	}

	_setupModel() {
		const groundGeometry = new THREE.PlaneGeometry(10, 10);
		const groundMaterial = new THREE.MeshStandardMaterial({
			color: '#2c3e50',
			roughness: 0.5,
			metalness: 0.5,
			side: THREE.DoubleSide,
		});

		const ground = new THREE.Mesh(groundGeometry, groundMaterial);
		ground.rotation.x = THREE.Math.degToRad(-90);
		this._scene.add(ground);

		const bigSphereGeometry = new THREE.SphereGeometry(1.5, 64, 64, 0, Math.PI);
		const bigSphereMaterial = new THREE.MeshStandardMaterial({
			color: '#ffffff',
			roughness: 0.1,
			metalness: 0.2,
		});

		const bigSphere = new THREE.Mesh(bigSphereGeometry, bigSphereMaterial);
		bigSphere.rotation.x = THREE.Math.degToRad(-90);
		this._scene.add(bigSphere);

		const torusGeometry = new THREE.TorusGeometry(0.4, 0.1, 32, 32);
		const torusMaterial = new THREE.MeshStandardMaterial({
			color: '#9b59b6',
			roughness: 0.5,
			metalness: 0.9,
		});

		for (let i = 0; i < 8; i++) {
			const torusPivot = new THREE.Object3D();
			const torus = new THREE.Mesh(torusGeometry, torusMaterial);
			torusPivot.rotation.y = THREE.Math.degToRad(45 * i);
			torus.position.set(3, 0.5, 0);
			torusPivot.add(torus);
			this._scene.add(torusPivot);
		}

		const smallSphereGeometry = new THREE.SphereGeometry(0.3, 32, 32);
		const smallSphereMaterial = new THREE.MeshStandardMaterial({
			color: '#e74c3c',
			roughness: 0.2,
			metalness: 0.5,
		});

		const smallSpherePivot = new THREE.Object3D();
		const smallSphere = new THREE.Mesh(smallSphereGeometry, smallSphereMaterial);
		smallSpherePivot.add(smallSphere)
		// 이름을 부여해두면 scene에서 조회할 수 있다.
		smallSpherePivot.name = 'smallSpherePivot';
		smallSphere.position.set(3, 0.5, 0);
		this._scene.add(smallSpherePivot);
	}

	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

		const smallSpherePivot = this._scene.getObjectByName('smallSpherePivot');
		if (smallSpherePivot) {
			smallSpherePivot.rotation.y = THREE.Math.degToRad(time * 50);

			// 광원에 대한 target의 위치가 회전하는 구의 위치를 추적하도록 (DirectionalLight, SpotLight)
			if (this._light.target) {
				const smallSphere = smallSpherePivot.children[0];
				// smallSphere 의 world 좌표계의 위치를 구해서 광원의 target 위치에 지정
				smallSphere.getWorldPosition(this._light.target.position);

				if (this._lightHelper) {
					this._lightHelper.update();
				}
			}
			// (PointLight)
			/* if (this._light) {
				const smallSphere = smallSpherePivot.children[0];
				smallSphere.getWorldPosition(this._light.position);

				if (this._lightHelper) {
					this._lightHelper.update();
				}
			} */
		}

	}
}

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

QnA

Q : blender 같은 툴도 현업에서 쓰나요? 구글링 해보면 light를 텍스쳐 맵핑할 때 블렌더를 쓴다는 얘기가 종종 나와서요. light가 너무 많으면 렌더링이 느려지니까 대신 텍스쳐로 light가 있는 것처럼 눈속임하는 방법을 찾고 있는 중인데 blender를 쓸지 아니면 다른 방법이 있는지 생각하는 중입니다.

A : 블렌더도 좋은 툴이고 저 역시 관심이 많은 툴인데요. 하지만 현장에서는 디벨로퍼가 3차원 모델까지 하진 않습니다. 사용하는 툴은 분야마다 다른데 저희쪽은 구글의 스케치업과 오도데스크의 아키를 사용합니다.

저작자표시

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

사용자 정의 지오메트리(Custom Geometry)

광원(Light)

티스토리툴바