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

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

 

 

 

재질(Material)

Objct3D 의 Line을 상속받은 클래스

- LineSegments

- LineLoop

 

재질(Material) 클래스

- PointsMaterial : Points 타입의 Object3D 객체를 위한 재질, 좌표를 점으로 렌더링

- LineBasicMaterial : Line 타입의 Object3D 객체를 위한 재질. 좌표를 순서대로 연결해서 라인으로 렌더링
- LineDashedMaterial : LineBasicMaterial 를 상속받는 자식 클래스

- MeshBasicMaterial : Mesh 타입의 Object3D 객체를 위한 재질. mesh를 지정된 색상으로 렌더링
- MeshLambertMaterial : Mesh 타입의 Object3D 객체를 위한 재질. mesh를 구성하는 정점에서 광원의 영향을 계산하는 재질
- MeshPhongMaterial : Mesh 타입의 Object3D 객체를 위한 재질. mesh가 렌더링되는 픽셀 단위로 광원의 영향을 계산하는 재질

- MeshStandardMaterial : Mesh 타입의 Object3D 객체를 위한 재질. PBR(물리기반 렌더링)을 위한 재질. 가장 많이 사용되며, 속도면에서는 상대적으로 느리지만 훨씬 고품질의 렌더링 결과를 얻을 수 있음.
- MeshPhysicalMaterial : MeshStandardMaterial 를 상속받는 자식 클래스. 보다 발전된 물리기반렌더링 재질. 재질의 표면에 코팅 효과를 줄 수 있고 단순 투명도 처리가 아닌 실제 유리같은 효과를 표현할 수 있음

- MeshDepthMaterial : Mesh 타입의 Object3D 객체를 위한 재질
- MeshNormalMaterial : Mesh 타입의 Object3D 객체를 위한 재질
- MeshToonMaterial : Mesh 타입의 Object3D 객체를 위한 재질

 

재질(Material) 클래스의 속성

: 모든 재질 클래스를 상속받는 클래스는 재질 클래스의 속성을 사용할 수 있다

- visible : Mesh가 보일지 안보일지에 대한 여부

- transparent : opacity 를 사용할지에 대한 여부

- opacity : 불투명도를 지정하는 값

- depthTest : 렌더링 되고 있는 mesh의 픽셀 위치의 z 값을 z 버퍼 값을 이용해 검사할지에 대한 여부

- depthWrite: 렌더링 되고 있는 mesh의 픽셀에 대한 z 값을 z 버퍼에 기록할지에 대한 여부

- side : mesh를 구성하는 삼각형 면에 대해 앞 면 or 뒷 면 or 모두 렌더링할것인지를 지정 (광원의 영향을 받는 재질에서 차이를 파악 가능)

* Depth Buffer (z 버퍼) 란? 3차원 객체를 카메라를 통해 좌표를 변환시켜 화면상에 렌더링 될 때 해당 3차원 객체를 구성하는 각 픽셀에 대한 z값 좌표값을 0 ~ 1로 정규화시킨다. 이 정규화된 z 값이 저장된 버퍼가 z 버퍼이다. 이 값이 작을수록 카메라에서 가까운 3차원 객체의 픽셀이다. 이 z 버퍼는 주로 더 멀리 있는 3차원 객체가 가까운 객체를 덮어서 렌더링되지 않도록 하기 위해 사용된다.

 

 

import * as THREE from '../build/three.module.js';
import {OrbitControls} from '../examples/jsm/controls/OrbitControls.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 = 3;
		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);
	}

	/* PointsMaterial */
	_setupModel1() {
		/* 10000개의 좌표를 vertices 배열에 추가 */
		const vertices = [];
		for (let i = 0; i < 10000; i++) {
			/* THREE.Math.randFloatSpread(5) : -5~5 사이의 난수값 생성 */
			const x = THREE.Math.randFloatSpread(5);
			const y = THREE.Math.randFloatSpread(5);
			const z = THREE.Math.randFloatSpread(5);

			vertices.push(x, y, z);
		}

		const geometry = new THREE.BufferGeometry();
		/* geometry.setAttribute()을 통해 geometry의 position 속성에 vertices 배열을 Float32BufferAttribute 로 랩핑하여 전달 */
		/* new THREE.Float32BufferAttribute(vertices, 3) : vertices 배열에 저장된 좌표가 xyz로 하나의 좌표라는 의미 */
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
		//console.log(geometry.attributes.position)

		/* 원 이미지 */
		const sprite = new THREE.TextureLoader().load('../examples/textures/sprites/disc.png');

		/* PointsMaterial 재질 생성 */
		/* map : 렌더링, alphaTest : 이미지의 픽셀 값 중 알파값이 이 alphaTest 보다 클때만 픽셀이 렌더링 되도록 함, color : 포인트의 색상 값, size : 포인트의 크기, sizeAttenuation : 포인트가 카메라의 거리에 따라 크기가 감쇄되도록 하는 여부 */
		const material = new THREE.PointsMaterial({map: sprite, alphaTest: 0.5, color: 0x00ffff, size: 5, sizeAttenuation: false});

		/* Points 타입의 Object3D 생성 */
		const points = new THREE.Points(geometry, material);
		this._scene.add(points);
	}

	/* LineBasicMaterial */
	_setupModel2() {
		/* line 에 대한 좌표 */
		const vertices = [
			-1, 1, 0,
			1, 1, 0,
			-1, -1, 0,
			1, -1, 0,
		];

		const geometry = new THREE.BufferGeometry();
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

		//const material = new THREE.LineBasicMaterial({color: 0xff0000});
		const material = new THREE.LineDashedMaterial({color: 0xff0000, dashSize: 0.2, gapSize: 0.1, scale: 1});

		//const line = new THREE.Line(geometry, material);
		//const line = new THREE.LineSegments(geometry, material);
		const line = new THREE.LineLoop(geometry, material);
		line.computeLineDistances(); //LineDashedMaterial
		this._scene.add(line);
	}

	/* Mesh Material */
	_setupModel() {
		const material = new THREE.MeshPhysicalMaterial  ({
			/* material */
			visible: true,
			transparent: false,
			opacity: 1,
			depthTest: true,
			depthWrite: true,
			side: THREE.FrontSide,

			/* MeshBasicMaterial */
			/* color: 0xffffff,  //mesh 의 색상,
			wireframe: false //mesh 를 선형태로 렌더링 할것인지에 대한 여부 */

			/* MeshLambertMaterial */
			/* color: 0xffffff,
			emissive: 0x00000, //광원에 영향을 받지 않는 재질 자체에서 방출하는 색상 값
			wireframe: false, */

			/* MeshPhongMaterial */
			/* color: 0xff0000,
			emissive: 0x00000,
			specular: 0xffff00, // 광원에 의해 반사 되는 색상
			shininess: 10, // 반사되는 정도
			flatShading: false, // 평편하게 렌더링 할지에 대한 여부
			wireframe: false, */

			/* MeshStandardMaterial */
			/* color: 0xff0000,
			emissive: 0x00000,
			roughness: 0, // 거칠기
			metalness: 0, // 금속성
			wireframe: false,
			flatShading: false, */

			/* MeshPhysicalMaterial  */
			color: 0xff0000,
			emissive: 0x00000,
			roughness: 1,
			metalness: 0,
			clearcoat: 0.4, // 표면에 코팅 효과가 적용되는 정도
			clearcoatRoughness: 0, // 코팅에 대한 거칠기 값
			wireframe: false,
			flatShading: false,
		});

		const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
		box.position.set(-1, 0, 0);
		this._scene.add(box);

		const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32), material);
		sphere.position.set(1, 0, 0);
		this._scene.add(sphere);
	}

	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();
}

 

 

 

텍스쳐(Texture)를 위한 재질의 속성 목록

MeshBasicMaterial	MeshLambertMaterial	MeshPhongMaterial	MeshStandardMaterial	MeshPhysicalMaterial
alphaMap	alphaMap	alphaMap	alphaMap	alphaMap
aoMap	aoMap	aoMap	aoMap	aoMap
		bumpMap	bumpMap	bumpMap
		displacementMap	displacementMap	displacementMap
	emissiveMap	emissiveMap	emissiveMap	emissiveMap
envMap	envMap	envMap	envMap	envMap
lightMap	lightMap	lightMap	lightMap	lightMap
map	map	map	map	map
			metalnessMap	metalnessMap
		normalMap	normalMap	normalMap
			roughnessMap	roughnessMap
				clearcoatMap
				clearcoatNormalMap
				clearcoatRoughnessMap
				transmissionMap
specularMap	specularMap	specularMap

 

map 속성

: 텍스쳐 객체를 지정하면 geometry의 표면에 지정된 텍스쳐의 이미지가 옷처럼 입혀진다.

: 기본적으로 텍스쳐 맵핑은 geometry에 UV 좌표 개념으로 맵핑 되어 있다. 이 UV 좌표는 Three.js 에서 제공하는 geometry에 기본적으로 지정되어 있고 이 반영된 UV 좌표대로 텍스쳐가 맵핑된다.

아래 이미지는 Three.js 에서 사용되는 UV 좌표를 보여준다. U는 이미지의 수평 방향에 대한 축이고 V는 수직 방향에 대한 축이다.

 

- repeat : 텍스쳐의 반복

- wrapS, wrapT : 텍스쳐 이미지가 반복과 관련된 속성

- offset : 텍스쳐 이미지의 시작 위치

- rotation : 텍스쳐 이미지의 회전

- center : 회전의 기준 좌표는 center 속성으로 조절 할 수 있음

- magFilter : 원래 이미지 크기보다 확대 시 렌더링 하는 필터

- minFilter : 원래 이미지 크기보다 축소 시 렌더링 하는 필터. minMap을 사용하는 속성이 가장 결과물이 좋지만 minMap의 생성을 위한 메모리 사용량이 상당하고 렌더링 시 하나의 픽셀값을 결정하기 위한 계산에 필요한 연산량이 각 속성에 따라 모두 다르므로 사용하는 텍스쳐 맵핑의 크기 등에 따라서 적절한 minFilter 속성을 사용해야 한다.

* minMap : 원래의 이미지 크기에서 절반으로 줄이는 것을 반복해서 미리 만들어 놓은 이미지 셋

 

 

map 외에 다양한 texure 사용해보기

다양한 texure 속성을 사용해 보기 위해 glass 이미지를 다운받는다.

* 텍스쳐 이미지 제공 사이트 : https://3dtextures.me/

3D TEXTURES

 

- normalMap : 법선 벡터를 이미지화해서 저장해 둔 것. (법선 벡터는 mesh의 표면에 대한 수직 벡터로 광원에 대한 영향을 계산하는데 사용된다.)

: 지정되지 않은 특정 지점에 대한 노말 벡터는 mesh의 구성 좌표의 노말 벡터들을 이용해 보간되어 계산된다.

그런데 노말벡터를 사용하게 되면 박스 표면의 노말 벡터를 normalMap 이미지의 RGB 값을 이용해 계산하게 되는데, 이렇게 되면 인위적으로 mesh 표면의 각 픽셀에 대해 법선 벡터를 지정할 수 있게 되고 각 픽셀 단위로 광원 표과가 달라져 입체감을 표현할 수 있게 된다.

하지만 이는 mesh의 지오메트리 형상이 바뀌는 것은 아니기 때문에 이 입체감은 착시 현상이다. 그럼에도 매우 적은  geometry 좌표 구성만으로 입체감을 매우 효과적으로 표현할 수 있는 방법이다.

- displacementMap : 실제로 mesh의 지오메트리의 좌표를 변형시켜 입체감을 표현한다. map 이미지의 픽셀값이 밝을 수록 좌표의 변위가 커지게 된다.

구 형태의 geometry 변위가 나타나지만 기본 박스 형태의 geometry는 변위 현상이 적용되지 않는다. displacementMap 은 실제 지오메트리의 구성 좌표를 변경시키기 때문에 이 박스의 표면에 대한 구성 좌표가 제공 되어야 한다. 박스 형태의 geometry는 여러개의 면으로 분할 시켜야 그 효과가 나타난다.

하지만 효과를 위해 좌표를 더 많이 추가하는 것은 렌더링 속도면에서 비효율적이다. 이를 위해 적절한 normalMap 과 함께 displacementMap 효과를 위한 적절한 면 분할이 필요하다.

- aoMap : 텍스쳐 이미지에 미리 음영 효과를 그려 넣은 것. aoMap 이 적용되기 위해서는 ambient light 와 geometry의 uv2 데이터 지정이 필요하다. 

aoMap 을 이용하면 미리 만들어진 세밀한 그림자와 같은 느낌의 효과를 지정할 수 있다.

- roughnessMap : 거칠기에 대한 재질이 적용된다. 이 속성에 대한 맵 이미지의 픽셀 값이 밝을수록 거칠기가 강화된다.

- metalnessMap : 금속 재질에 대한 느낌을 부여한다. 

- alphaMap : 투명도에 대한 맵 속성. 이미지의 픽셀값이 밝을수록 불투명하게 된다. 투명도에 대한 활성화가 필요하다.

- lightMap : 지정된 이미지의 색상으로 발광하는 느낌을 표현할 수 있다. eometry의 uv2 데이터 지정이 필요하다. 

- bumpMap : normalMap  이 사용되면 무시되는 속성이다. 실무에서는 normalMap 을 주로 사용한다.

 

 

// 04-metarial.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 = 3;
		this._camera = camera;
		// 카메라를 scene의 자식으로 추가
		this._scene.add(camera);
	}

	_setupLight() {
		// aoMap 을 위해 ambientLight 추가
		const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
		this._scene.add(ambientLight);

		const color = 0xffffff;
		const intensity = 1;
		const light = new THREE.DirectionalLight(color, intensity);
		light.position.set(-1, 2, 4);

		//this._scene.add(light);
		// 광원이 카메라와 함께 회전하도록 광원을 카메라의 자식으로 추가
		this._camera.add(light);
	}

	/* PointsMaterial */
	_setupModel1() {
		/* 10000개의 좌표를 vertices 배열에 추가 */
		const vertices = [];
		for (let i = 0; i < 10000; i++) {
			/* THREE.Math.randFloatSpread(5) : -5~5 사이의 난수값 생성 */
			const x = THREE.Math.randFloatSpread(5);
			const y = THREE.Math.randFloatSpread(5);
			const z = THREE.Math.randFloatSpread(5);

			vertices.push(x, y, z);
		}

		const geometry = new THREE.BufferGeometry();
		/* geometry.setAttribute()을 통해 geometry의 position 속성에 vertices 배열을 Float32BufferAttribute 로 랩핑하여 전달 */
		/* new THREE.Float32BufferAttribute(vertices, 3) : vertices 배열에 저장된 좌표가 xyz로 하나의 좌표라는 의미 */
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
		//console.log(geometry.attributes.position)

		/* 원 이미지 */
		const sprite = new THREE.TextureLoader().load('../examples/textures/sprites/disc.png');

		/* PointsMaterial 재질 생성 */
		/* map : 렌더링, alphaTest : 이미지의 픽셀 값 중 알파값이 이 alphaTest 보다 클때만 픽셀이 렌더링 되도록 함, color : 포인트의 색상 값, size : 포인트의 크기, sizeAttenuation : 포인트가 카메라의 거리에 따라 크기가 감쇄되도록 하는 여부 */
		const material = new THREE.PointsMaterial({map: sprite, alphaTest: 0.5, color: 0x00ffff, size: 5, sizeAttenuation: false});

		/* Points 타입의 Object3D 생성 */
		const points = new THREE.Points(geometry, material);
		this._scene.add(points);
	}

	/* LineBasicMaterial */
	_setupModel2() {
		/* line 에 대한 좌표 */
		const vertices = [
			-1, 1, 0,
			1, 1, 0,
			-1, -1, 0,
			1, -1, 0,
		];

		const geometry = new THREE.BufferGeometry();
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

		//const material = new THREE.LineBasicMaterial({color: 0xff0000});
		const material = new THREE.LineDashedMaterial({color: 0xff0000, dashSize: 0.2, gapSize: 0.1, scale: 1});

		//const line = new THREE.Line(geometry, material);
		//const line = new THREE.LineSegments(geometry, material);
		const line = new THREE.LineLoop(geometry, material);
		line.computeLineDistances(); //LineDashedMaterial
		this._scene.add(line);
	}

	/* Mesh Material */
	_setupModel() {
		/* TextureLoader 객체 생성 */
		const textureLoader = new THREE.TextureLoader();
		/* 이미지 경로, 텍스쳐 생성 성공 시 콜백 */
		const map21 = textureLoader.load(
			'../examples/textures/uv_grid_opengl.jpg',
			texture => {
				texture.repeat.x = 1;
				texture.repeat.y = 1;

				// repeat 와 함께 사용
				// 텍스쳐 이미지가 반복됨
				/* texture.wrapS = THREE.RepeatWrapping; 
				texture.wrapT = THREE.RepeatWrapping; */
				// 처음에만 이미지가 한번 맵핑되고 이후 반복부터는 이미지의 끝단 픽셀로 영역을 채움
				texture.wrapS = THREE.ClampToEdgeWrapping; 
				texture.wrapT = THREE.ClampToEdgeWrapping;
				// 이미지를 x 와 y 방향으로 반복하되 짝수번째 반복에서는 이미지가 거울에 반사된 모양으로 맵핑됨
				/* texture.wrapS = THREE.MirroredRepeatWrapping; 
				texture.wrapT = THREE.MirroredRepeatWrapping; */

				// 텍스처 이미지의 시작 위치
				texture.offset.x = 0;
				texture.offset.y = 0;

				// 텍스처 이미지의 회전 값
				texture.rotation = THREE.MathUtils.degToRad(0);
				// 회전의 기준 좌표는 center 속성으로 조절 할 수 있음
				texture.center.x = 0.5;
				texture.center.y = 0.5;

				// 필터 속성
				// 원래 이미지 크기보다 확대 시 렌더링 하는 필터
				//texture.magFilter = THREE.LinearFilter; // 가장 가까운 4개의 픽셀 색상을 얻어와 선형 보간한 값을 사용. 확대할수록 뭉개짐
				texture.magFilter = THREE.NearestFilter; // 가장 가까운 하나의 픽셀 색상을 가져와서 그대로 사용. 확대할수록 계단 현상이 발생

				// 원래 이미지 크기보다 축소 시 렌더링 하는 필터
				//texture.minFilter = THREE.NearestMipmapLinearFilter; // 렌더링할 맵핑 크기와 크기가 가장 가까운 minMap 이미지 2개를 선택하고 minMap 이미지로부터 가장 가까운 픽셀 1개씩을 얻은 뒤 얻어진 2개의 픽셀의 가중치 평균 값을 사용
				//texture.minFilter = THREE.NearestFilter; // 가장 가까운 하나의 픽셀 색상을 가져와서 그대로 사용
				//texture.minFilter = THREE.LinearFilter; // 가장 가까운 4개의 픽셀 색상을 얻어와 선형 보간한 값을 사용
				//texture.minFilter = THREE.NearestMipmapNearestFilter; // 렌더링할 맵핑 크기와 가장 가까운 minMap 이미지를 1개 선택후 가장 가까운 1개의 픽셀 값을 가져와서 사용
				texture.minFilter = THREE.LinearMipmapNearestFilter; // 렌더링 할 맵핑 크기와 가장 가까운 minMap 이미지 1개를 선택하고 가장 가까운 4개의 픽셀을 가져와서 선형 보간하여 사용
				texture.minFilter = THREE.LinearMipmapLinearFilter; // 렌더링할 맵핑 크기와 가장 가까운 minMap 이미지를 2개 선택하고 각각 이미지에서 가장 가까운 4개의 픽셀을 가져와 선형 보간하여 얻은 2개의 색상 값을 가중치 평균하여 사용
			}
		);

		const material1 = new THREE.MeshPhysicalMaterial({
			/* material */
			visible: true,
			transparent: false,
			opacity: 1,
			depthTest: true,
			depthWrite: true,
			side: THREE.FrontSide,

			/* MeshBasicMaterial */
			/* color: 0xffffff,  //mesh 의 색상,
			wireframe: false //mesh 를 선형태로 렌더링 할것인지에 대한 여부 */

			/* MeshLambertMaterial */
			/* color: 0xffffff,
			emissive: 0x00000, //광원에 영향을 받지 않는 재질 자체에서 방출하는 색상 값
			wireframe: false, */

			/* MeshPhongMaterial */
			/* color: 0xff0000,
			emissive: 0x00000,
			specular: 0xffff00, // 광원에 의해 반사 되는 색상
			shininess: 10, // 반사되는 정도
			flatShading: false, // 평편하게 렌더링 할지에 대한 여부
			wireframe: false, */

			/* MeshStandardMaterial */
			/* color: 0xff0000,
			emissive: 0x00000,
			roughness: 0, // 거칠기
			metalness: 0, // 금속성
			wireframe: false,
			flatShading: false, */

			/* MeshPhysicalMaterial  */
			/* color: 0xff0000,
			emissive: 0x00000,
			roughness: 1,
			metalness: 0,
			clearcoat: 0.4, // 표면에 코팅 효과가 적용되는 정도
			clearcoatRoughness: 0, // 코팅에 대한 거칠기 값
			wireframe: false,
			flatShading: false, */
		});

		const map = textureLoader.load('images/glass/Glass_Window_002_basecolor.jpg');
		const mapAO =textureLoader.load('images/glass/Glass_Window_002_ambientOcclusion.jpg');
		const mapHeight =textureLoader.load('images/glass/Glass_Window_002_height.png');
		const mapNormal =textureLoader.load('images/glass/Glass_Window_002_normal.jpg');
		const mapRoughness =textureLoader.load('images/glass/Glass_Window_002_roughness.jpg');
		const mapMetalic =textureLoader.load('images/glass/Glass_Window_002_metallic.jpg');
		const mapAlpha =textureLoader.load('images/glass/Glass_Window_002_opacity.jpg');
		const mapLight =textureLoader.load('images/glass/light.jpg');

		const material = new THREE.MeshStandardMaterial({
			map: map,
			normalMap: mapNormal, 

			displacementMap: mapHeight, 
			displacementScale: 0.2, // 변위 효과를 조절
			displacementBias: -0.15, // 변위 결과를 조절

			aoMap: mapAO,
			aoMapIntensity: 1,

			roughnessMap: mapRoughness,
			roughness: 1,

			metalnessMap: mapMetalic,
			metalness: 0.5,

			//alphaMap: mapAlpha,
			transparent: true,
			side: THREE.DoubleSide, // mesh의 뒷면도 렌더링

			lightMap: mapLight,
			lightMapIntensity: 1,
		});

		// displacementMap 의 적용을 위해 각 면에 대해 256개로 segment화 시켜줌
		const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1, 256, 256, 256), material);
		box.position.set(-1, 0, 0);
		// aoMap, lightMap 의 적용을 위해 uv2 속성 지정
		box.geometry.attributes.uv2 = box.geometry.attributes.uv;
		this._scene.add(box);

		// box에 대해서 법선 벡터를 시각화
		/* const boxHelper = new VertexNormalsHelper(box, 0.1, 0xffff00);
		this._scene.add(boxHelper); */

		// displacementMap 의 효과 극대화를 위해 512개로 segment화 시켜줌
		const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 512, 512), material);
		sphere.position.set(1, 0, 0);
		// aoMap, lightMap 의 적용을 위해 uv2 속성 지정
		sphere.geometry.attributes.uv2 = sphere.geometry.attributes.uv;
		this._scene.add(sphere);

		// sphere에 대해서 법선 벡터를 시각화
		/* const sphereHelper = new VertexNormalsHelper(sphere, 0.1, 0xffff00);
		this._scene.add(sphereHelper); */
	}

	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();
}