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

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

필기용 깃허브 : https://github.com/sduu/three-tutorial

개발 환경 구성

1. Visual Studio Code 설치

https://code.visualstudio.com/

2. Three.js 라이브러리 설치

: https://threejs.org/

: 실습은 module 방식으로 개발하기때문에 three.module.js 파일을 사용한다.

3. 실습을 진행할 html 파일을 생성

4. 페이지 실행을 위해 설정 파일을 생성

- VSCode 실행 및 디버그를 선택 (ctrl + shift + D)

- launch.json 파일 만들기를 선택

- 페이지를 어떤 웹브라우저에 표시할 것인지 선택

- 실행을 위한 설정 파일이 생성됨

- 실행 메뉴에서 디버깅 시작을 클릭하면 페이지가 웹브라우저에 표시됨 (F5)

5. Visual Studio Code 의 확장프로그램인 Live Server 설치

: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

: 웹개발을 위해서 웹페이지가 웹서버를 통해 접근할 수 있도록 설정하기 위함

(현재는 로컬 주소로 페이지에 접근하고 있지만 라이브서버를 통해 주소를 url 형태로 접근할 수 있음)

: 실행할 페이지를 선택 후 하단의 go live 버튼을 클릭 (alt + L, O)

기본 구성 요소와 코드

Three.js의 구성

: Three.js 는 3차원 객체로 구성되는 장면(Scene)이 있고,

이 장면을 모니터와 같은 출력 장치에 출력할 수 잇는 렌더러(Renderer)가 있다.

: 장면을 렌더링할때는 어떤 시점에서 장면을 보는지에 따라 다르게 렌더링 되는데

그 시점을 카메라(Camera)로 정의한다.

: 장면은 조명(Light)과 3차원 모델인 Mesh로 구성된다.

3차원 형상이 화면에 표시되기 위해서는 적절한 광원이 필요하기 때문에 조명이 있는것이다.

: Mesh는 Object3D의 파생 클래스인데

형상 등을 정의하는 Geometry 와 색상 및 투명도 등을 정의하는 Material 로 정의된다.

회전하는 정육면체

<!-- 01-basic.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="01-basic.css">
	<!-- 
		* type="module" : three.js 라이브러리를 module 버전으로 import 하기 위해 자바스크립트 파일을 module 타입으로 추가 
		* defer : 이 속성을 지정하면 페이지가 모두 로딩 된 후 자바스크립트가 실행 됨
	-->
	<script type="module" src="01-basic.js" defer></script>
</head>
<body>
	<div id="webgl-container"></div>
</body>
</html>

/* 01-basic.css */
* {
	outline: none;
	margin: 0;
}

body {
	overflow: hidden;
}

#webgl-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

// 01-basic.js
import * as THREE from '../build/three.module.js';

class App {
	constructor() {
		const divContainer = document.querySelector('#webgl-container');
		/* 다른 method 에서 참조 할 수 있도록 field 화 */
		this._divContainer = divContainer;

		/* antialias : 오브젝트들의 경계선이 계단 현상 없이 부드럽게 표현되는 옵션 */
		const renderer = new THREE.WebGLRenderer({antialias: true});
		/* pixel ratio : 픽셀 밀도 설정 */
		renderer.setPixelRatio(window.devicePixelRatio);
		/* renderer.domElement : canvas 타입의 Dom 객체 */
		divContainer.appendChild(renderer.domElement);
		this._renderer = renderer;

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

		/* 밑줄로 시작하는 field 와 method는 App 클래스 내부에서만 사용된다는 의미로 씀.
		javascript에서는 private 성격을 부여할 수 있는 기능이 없기 때문에 이와 같이 밑줄로 표현하는것이 개발자간의 약속이다) */
		this._setupCamera();
		this._setupLight();
		this._setupModel();

		/* renderer 나 camera 는 창크기가 변경 될 때 마다 크기에 맞게 속성 값을 재설정해주어야 함 */
		/* resize method를 bind 통해 넘기는 이유 : resize method 안에서 this 가 가르키는 객체가 이벤트 객체가 아닌 App 클래스의 객체가 되도록 하기 위함 */
		window.onresize = this.resize.bind(this);
		/* 생성자에서 무조건 한 번은 호출 : 창크기에 맞게 설정 */
		this.resize();

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

	_setupCamera() {
		/* 3차원 그래픽을 출력할 영역에 대한 크기를 가져옴 */
		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);
	}

	/* 파란색 정육면체 mesh를 생성하는 method */
	_setupModel() {
		/* 형태 : BoxGeometry(가로, 세로, 깊이) */
		const geometry = new THREE.BoxGeometry(1, 1, 1);
		/* 재질 */
		const material = new THREE.MeshPhongMaterial({color: 0x44a88});
		
		/* mesh 생성 */
		const cube = new THREE.Mesh(geometry, material);

		/* scene 객체의 구성요소로 추가 */
		this._scene.add(cube);
		this._cube = cube;
	}

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

		/* camera 속성 변경 */
		this._camera.aspect = width / height;
		this._camera.updateProjectionMatrix();

		/* renderer 의 크기 설정 */
		this._renderer.setSize(width, height);
	}

	/* time : requestAnimationFrame 가 render 함수에 전달해주는 값 */
	render(time) {
		/* renderer 가 scene 을 카메라 시점으로 렌더링하도록 함 */
		this._renderer.render(this._scene, this._camera);
		/* time 인자 : 렌더링이 처음 시작된 이후 경과된 시간값. millisecond unit */
		this.update(time);
		/* 생성자 코드와 동일 */
		requestAnimationFrame(this.render.bind(this));
	}

	update(time) {
		time *= 0.001; // second unit
		/* 정육면체의 회전 값에 time 값을 지정 */
		this._cube.rotation.x = time;
		this._cube.rotation.y = time;
	}
}

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

저작자표시

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

개발 환경 구성

기본 구성 요소와 코드

티스토리툴바