3. what is three.js ? (3)

1) three.js는 어떤 환경에서도 구동이 될까?

• three.js를 반응형으로 만들어 어떤 환경에서도 구동이 가능하다.
• 반응형이란, pc, 타블렛, 스마트폰 등 다양한 사이즈에 맞춰 콘텐츠를 최적화하는 것을 말한다.

2) three.js와 반응형 설정

아래 코드들은 이전의 라이브 예제와 이어집니다.

(1) canvas 크기 변경

• canvas 요소는 300x150 px크기이다.

<canvas id="c"></canvas>

• canvas의 기본 display는 inline이다. (글자처럼 취급)
• canvas가 페이지 전체를 차지하게 변경해보자.

<style>
	html, body {
		margin: 0;
		height: 100%;
	}
	#c {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>

• 이런! 화면 높이를 변경하니 콘텐츠도 같이 세로로 늘어나고 확대하면 콘텐츠가 깨진다!!ㅜ

(2) 창크기가 늘어나면 콘텐츠가 늘어나는 문제

• 창 높이가 커지면 콘텐츠가 같이 세로로 늘어지는 문제는, 카메라를 이용해서 해결할 수 있다.
• 카메라의 aspect(비율)을 canvas 크기에 맞춰야한다.(창이 세로로 커지면 카메라 비율도 같이 변경!)

function render(time) {
	time *= 0.001;
	
	const canvas = renderer.domElement;  //canvas 불러오기
	camera.aspect = canvas.clientWidth / canvas.clientHeight; //canvas비율을 카메라에 적용
	camera.updateProjectionMatrix();    //변경된 값을 카메라에 적용
}

• 아니! 콘텐츠 크기가 일정한 비율로 커지는데, 콘텐츠를 확대하면 깨진다ㅜ!!

(3) 콘텐츠를 확대하면 깨지는 문제(계단문제)

• 사실, canvas요소에는 2가지 크기값이 있다.
• 하나는 canvas 요소의 크기값, 또 다른 하나는 canvas 원본 픽셀값이다.(픽셀값은 해상도에 영향을 줌)
• 우리는 드로잉버퍼(drawingbuffer/해상도)의 크기를 canvas의 디스플레이 크기로 지정하여 해결가능하다.
• canvas의 원본크기와 디스플레이 크기를 비교하여, 크기가 다르면 true를 반환하는 함수를 사용해보자.

아니, 귀찮게 크기를 비교하지 말고 계속 드로잉 버퍼의 크기를 변경하면 안되나요?
안됩니다! canvas의 크기를 변경할 때마다 화면을 다시 랜더링하므로, 계속 변경하게 하면 자원 낭비가 심합니다.ㅜ

// a. resize 함수 생성
function resizeRendererToDisplaySize(renderer) {
	const canvas = renderer.domElement;
	const width = canvas.clientWidth;
	const height = canvas.clientHeight;
	const needResize = canvas.width !== width || canvas.hegiht !== height;

	if (neddResize) {
		renderer.setSize(width, height, false);   //canvas 리사이징(마지막인자는 꼭 false!)
	}
	return needResize;
}

// b. resize가 true이면 -> 카메라 비율을 변경함 

function render(time) {
	time *= 0.001;
	
	if (resizeRendererToDisplaySize(renderer)) {
		const canvas = renderer.domElement;
		camera.aspect = canvas.clientWidth / canvas.clientHeight;
		camera.updateProjectionMatrix();
	}
}

(4) 예시 코드 보기

three.js와 반응형 디자인