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

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

카메라 (Camera)

Camera를 상속받는 클래스 (Camera는 object 3D를 상속받는다

- PerspectiveCamera : 가까이 있는 물체가 멀리 있는 물체보다 상대적으로 크게 보이도록 원근감을 표현해서 렌더링한다. fovy, aspect, zNear, zFar를 인자로 받는다. 이 인자들을 통해 절두체가 구성된다. (절두체 안에 존재하는 물체가 카메라를 통해 보여지게 된다) zNear와 zFar 거리 사이를 벗어나면 렌더링되지 않는다.

- OrthographicCamera : 물체간의 원근감없이 물체의 크기 크기대로 렌더링한다. zLeft, xRight, yTop, yBottom, zNear, zFar를 인자로 받는다.

// 07-camera.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;

		// PerspectiveCamera(절두체의 높이 방향에 대한 각도, 절두체의 가로 길이를 세로 길이로 나눈 비율, 카메라로부터의 거리 앞쪽, 카메라로부터의 거리 뒤쪽)
		const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);

		// OrthographicCamera(수평축 왼쪽에 대한 좌표값, 수평축 오른쪽에 대한 좌표값, 수직축 위쪽에 대한 좌표값, 수직축 아래쪽에 대한 좌표값, 카메라로부터의 거리 앞쪽, 카메라로부터의 거리 뒤쪽)
		// aspect : 렌더링 결과가 표시되는 DOM 요소 크기에 대한 종횡비를 적용
		/* const aspect = window.innerWidth / window.innerHeight;
		const camera = new THREE.OrthographicCamera(aspect * -1, aspect * 1, 1, -1, 0.1, 100);
		camera.zoom = 0.15; */

		//camera.position.z = 2;
		// 카메라의 위치
		camera.position.set(7, 7, 0);
		// 카메라가 바라보는 위치
		camera.lookAt(0, 0, 0);
		this._camera = camera;
	}

	_setupLight() {
		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);
		smallSpherePivot.name = 'smallSpherePivot';
		smallSphere.position.set(3, 0.5, 0);
		this._scene.add(smallSpherePivot);

		// target : 카메라의 위치를 조절하기 위해 생성
		// Object3D로 생성했기때문에 화면상에 렌더링되지는 않지만 scene의 구성요소로 자리잡는다.
		const targetPivot = new THREE.Object3D();
		const target = new THREE.Object3D();
		targetPivot.add(target);
		targetPivot.name = 'targetPivot';
		target.position.set(3, 0.5, 0);
		this._scene.add(targetPivot);
	}

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

		if (this._camera instanceof THREE.PerspectiveCamera) {
			// PerspectiveCamera
			this._camera.aspect = aspect;
		} else {
			// OrthographicCamera
			this._camera.left = aspect * -1;
			this._camera.right = aspect * 1;
		}

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

			// 카메라의 위치가 작은 구를 따라가도록
			const smallSphere = smallSpherePivot.children[0];
			smallSphere.getWorldPosition(this._camera.position);

			// target이 작은 구보다 앞서도록
			const targetPivot = this._scene.getObjectByName('targetPivot');
			if (targetPivot) {
				targetPivot.rotation.y = THREE.Math.degToRad(time * 50 + 10);

				const target = targetPivot.children[0];
				const pt = new THREE.Vector3();

				target.getWorldPosition(pt);

				// 카메라의 시선이 작은 구의 다음 위치(target의 위치)를 향하도록
				this._camera.lookAt(pt);
			}

			if (this._light.target) {
				const smallSphere = smallSpherePivot.children[0];
				smallSphere.getWorldPosition(this._light.target.position);

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

	}
}

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

그림자(Shadow)

: Three.js는 동적으로 그림자를 렌더링 할 수 있다. 내부적으로 텍스쳐 맵핑을 통해 그림자를 위한 이미지를 생성하고, 이 텍스쳐 맵핑 이미지를 이용해 그림자를 시각화한다.

: Three.js 에서 그림자를 렌더링하기 위해서는 Renderer, light, model 객체의 설정이 필요하다.

// renderer
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;

// light
const light = new THREE.DirectionalLight(0xffffff, 0.5);
light.castShadow = true;

// model
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.receiveShadow = true;
ground.castShadow = true;

: Three.js 에서 그림자를 제공하는 광원은 DirectionalLight, PointLight, SpotLight다.

그림자를 지원하는 광원은 모두 shadow라는 속성을 갖고 이 shadow 속성에는 camera 속성이 존재한다. 이 camera가 그림자에 대한 텍스쳐 이미지를 생성하기 위해서 사용된다.

이 카메라의 절두체를 벗어나는 객체(그림자)는 모두 잘려나가게 된다. 이를 해결하기 위해 그림자를 위한 카메라의 절두체를 좀 더 크게 해주면 된다.

: 그림자는 텍스쳐 맵핑 이미지를 이용해 표현되는데, 이는 기본적으로 가로와 세로 크기가 512다. 이 크기를 더 크게하면 그림자의 품질이 향상된다.

: 상황에 따라 그림자의 경계가 선명하지 않고 블러링 처리가 될 필요가 있는데, 이는 shadow의 radius의 값을 통해 설정할 수 있다.

// 08-shadow.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);
		// 그림자 맵 활성화
		renderer.shadowMap.enabled = true;
		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);
		camera.lookAt(0, 0, 0);
		this._camera = camera;
	}

	_setupLight() {
		// 화면을 밝히기 위해 광원 추가
		const auxLight = new THREE.DirectionalLight(0xffffff, 0.5);
		auxLight.position.set(0, 5, 0);
		auxLight.target.position.set(0, 0, 0);
		this._scene.add(auxLight.target);
		this._scene.add(auxLight);

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

		// PointLight
		/* const light = new THREE.PointLight(0xffffff, 0.7);
		light.position.set(0, 5, 0); */

		// SpotLight
		const light = new THREE.SpotLight(0xffffff, 0.5);
		light.position.set(0, 5, 0);
		light.target.position.set(0, 0, 0);
		light.angle = THREE.Math.degToRad(30);
		light.penumbra = 0.2;
		this._scene.add(light.target);

		// 그림자가 잘리는 현상 해결 : 그림자를 위한 카메라의 절두체를 좀 더 크게 해줌
		light.shadow.camera.top = light.shadow.camera.right = 6;
		light.shadow.camera.bottom = light.shadow.camera.left = -6;

		// 그림자의 품질 향상
		light.shadow.mapSize.width = light.shadow.mapSize.height = 1024;
		// 그림자의 외곽을 블러링 처리
		light.shadow.radius = 1;

		const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
		this._scene.add(cameraHelper);

		this._scene.add(light);
		this._light = light;
		// 그림자 활성화 여부
		light.castShadow = true;
	}

	_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);
		// 그림자를 받아서 표현할지에 대한 여부
		ground.receiveShadow = true;
		this._scene.add(ground);

		//const bigSphereGeometry = new THREE.SphereGeometry(1.5, 64, 64, 0, Math.PI);
		const bigSphereGeometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 64, 2, 3);
		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);
		bigSphere.position.y = 1.6;
		// 그림자를 받아서 표현할지에 대한 여부
		bigSphere.receiveShadow = true;
		// 그림자를 전달할지에 대한 여부
		bigSphere.castShadow = true;
		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);
			torus.receiveShadow = true;
			torus.castShadow = true;
			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)
		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);

			if (this._light.target) {
				const smallSphere = smallSpherePivot.children[0];
				smallSphere.getWorldPosition(this._light.target.position);

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

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

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

저작자표시

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

카메라 (Camera)

그림자(Shadow)

티스토리툴바