3차원 공간의 개념

3D 그래픽에 대한 이해를 돕기 위해,

먼저 3D 좌표계에 대한 내용을 정리해보도록 하겠습니다.

​

평지가 있습니다.

평지는 바둑판 모양처럼 격자로 선이 그려져 있는데,

땅 주인이 땅의 모서리로부터

가로 방향으로 1부터 시작해서 번호를 매기고,

세로 방향으로도 동일하게 1부터 시작해서 번호를 매겼습니다.

가로 방향을 X 라고 하고, 세로 방향을 Y 라고 합시다.

​

크레이가 이 중 5번째 칸, 6번째 줄에 서있다면

크레이가 서 있는 지점을 ( 5, 6 ) 좌표에 있다고 할 수 있겠지요.

만일 5번째 칸, 7번째와 8번째 줄의 가운데 선다면 ( 5, 7.5 ) 좌표라고 소숫점을 넣어 부를 수도 있을 겁니다.

이 것이 2D좌표계입니다. XY좌표계라고 하지요.

​

3D 좌표계는 여기에 높이라는 개념이 추가됩니다.

​

HTML 표준 기술 캔버스는 기본적으로 X는 가로 방향, Y는 높이, Z 는 세로방향인데요.

카메라 각도를 조정하는 것으로 Y를 세로방향, Z를 높이로 바꿀 수도 있습니다.

​

우선은 기본대로 가는 것이 좋기 때문에 기본대로 하도록 하겠습니다 :)

​

크레이가 5번째 칸, 6번째 줄, 3층에 있다면 좌표는 어떻게 될까요?

​

( 5, 6, 3 ) 이라고 답하신다면 땡~ 입니다.

​

( 5, 3, 6 ) 정답입니다. 가로 X가 5, 높이 Y가 3이고 세로방향 Z 가 6이기 때문이지요.

​

이 것이 3차원 좌표계입니다.

​

아울러 3차원 공간에서는 "카메라"라는 개념이 있습니다.

3차원 구성 공간에서 사물을 보기 위해서는 보는 시점인 사람의 눈에 해당하는

카메라가 필수입니다.

​

아래와 같이 카메라가 물체를 바라본다고 칠 때,

실제 카메라 안에 비치는 모양은 아래와 같습니다

마치 영화를 찍을 때 방송국의 스튜디오처럼 카메라가 위치를 이동하거나 회전, 줌인등을 하면, 카메라의 사각형 공간에 비쳐 보이는 물체가 동적으로 움직이는 것처럼 보이는 것이지요.

​

캔버스 기술에서도 이에 해당하는 3차원 공간을 볼 카메라를 배치할 수가 있는데요.

​

지난번 다루었던 소스를 단위 단위별로 한번 살펴볼까요?

​

카메라를 배치하기 전 2가지를 먼저 해주어야 합니다.

​

1) 3차원 공간 라이브러리인 three.js 를 HTML 문서에 포함한다.

2) 공허한 3차원 공간을 만든다.

 

 

 

 

출처 : https://itadventure.tistory.com/45