1.1. 3D 공간의 이해

2차원 좌표 시스템.

우리가 흔히 보는 평면좌표(Cartesian Coordinate System)는 수평방향인 x와 수직방향인y 축으로 나누어져 있다. 두 지점이 만나는 점을 (0,0)으로 두고 이동하는 방향에 따라 각 축의 좌표는 양수가 되기도 하고, 음수가 되기도 한다.

아래는 2차원 좌표계에서 각축의 이동 방향에 따라, 좌표값의 변화를 나열한 예시이다.

up : y값이 증가
down : y값이 감소 
right : x값이 증가
left : x값이 감소

3차원 좌표 시스템

3차원의 좌표시스템은 x와 y축에 이어 Z 축이 수직으로 추가된 형태를 띈다. z좌표의 변화도 x,y좌표와 동일하게 중심으로부터 멀어지는 것과 비례하여 값이 책정된다. 조금 더 쉽게 설명하면 모니터를 중심으로 나에게 가까이 올수록 값이 증가하고 멀어질수록 값이 감소하게 된다.

아래는 3차원 좌표계에서 각축의 이동 방향에 따라, 좌표값의 변화를 나열한 예시이다.

up : y값이 증가
down : y값이 감소 
right : x값이 증가
left : x값이 감소
near : z값이 증가 
far : z값이 감소

물체를 표현하는 기본요소

물체를 표현하는 기본적인 요소는 “점(Point)”, “선(line)”, “면(Face)”이다. 이들의 조합으로 3D객체를 만들 수 있다.

점 (Point)

3D공간에서 가장 기본적인 개념으로, 크기가 없는 위치를 나타내는 개념이다. 3D 좌표계에서 점은 (x,y,z)로 그 위치를 표현하며, 이 좌표는 기준점이 되는 중심점으로부터 위치를 나타낸다. 추상적인 개념이기에, 실제로는 보이지 않는다.

선 (Line)

선(Line)은 두개이상의 점을 이어서 만든 형태로, 길이와 방향이 있는 개념이다. 3D공간에서 두 점을 연결해서 만든 3D선은 두점을 지나는 직선을 나타낸다. 보통 실제로는 점과 점을 이어서 선이 그려지기 때문에, 선자체로는 화면에서 볼 수 없다. 이유인 즉 두께가 존재하지 않기 때문이다.

Tip : 곡선은 무수히 많은 점들이 직선으로 연결되어 만들어져있기에, 2개의 점으로는 구현 할 수 없다.

면(Face)

면(Face)는 3개이상의 점을 이어서 만든 평면 형태로, 면은 너비와 높이가 있는 평평한 표면이다. 3D공간에서 세개의 점으로 정의되는 평면은 삼각형 면이며, 3D객체를 구성할 때 많은 면들의 조합으로 객체를 구성하게 된다.

3D객체

3D객체(3D Object)는 점, 선, 면들의 조합으로 이루어진 물체를 의미한다. 보통 3D객체는 여러 면들로 구성되어 있어, 이러한 면들로 복잡한 모양을 만들어 낸다. 예를 들어, 가장 간단한 3D큐브는 6개의 사각형 면으로 이루어져있고, 사각형면은 다시 2개의 삼각형 면으로 구성되어 있다.

다른 좌표 시스템

좌표 시스템이란 (x,y,z) 형태의 표현하는 좌표계를 일컫는다. 그러나, 이 좌표계는 어떤 관찰자 혹은 대상과 원점(origin)이 다르거나 축(axis)이 다른 새로운 좌표 체계를 가질 수 있는데 이를 다른 좌표 시스템이라고 한다.

예를 들어, 원래의 좌표 시스템이 (x,y,z)축을 사용하여, 3D공간의 점을 표현하고 있다고 가정하자. 그러나 다른 좌표시스템에서는 (y,x,z)축을 사용하여 동일한 3D 공간을 표현하는 경우, 원본의 (1,2,3)좌표는 다른 좌표계에서는 (2,1,3)으로 표현된다. 이를 그림으로 표현하면 다음과 같다.

이런 경우, 박스의 밑면과 윗면은 관찰자에의해 옆면이 될 것이고, 기존 옆면은 좌우면이 될 것이다. 이때 관찰자의 좌표계를 통해 상자의 점들을 x축으로 10만큼 이동하라고 지시하여 박스를 (x+10,y,z)로 변경하게 되면, 관찰자의 입장에서는 상자가 (x,y+10,z) 위로 이동한 것 처럼 보인다. 이를 관찰자의 입장에서 x를 10만큼 이동하게 요청하려면 (x,y+10,z)로 요청을 해야 좌우로 이동한 것처럼 보일 수 있다.

아래는 예시 코드이다.

// 기존 좌표 시스템: (x, y, z)
// 다른 좌표 시스템: (y, x, -z)

interface Point {
  x: number;
  y: number;
  z: number;
}

// 기존 좌표를 다른 좌표로 변환하는 함수
function convertToDifferentCoordinates(point: Point): Point {
  const newX = point.y;
  const newY = point.x;
  const newZ = point.z;

  return { x: newX, y: newY, z: newZ };
}

// 테스트용 기존 좌표
const originalPoint: Point = { x: 3, y: 5, z: 2 };

// 좌표 변환
const convertedPoint = convertToDifferentCoordinates(originalPoint);

console.log("Original Point:", originalPoint);
console.log("Converted Point:", convertedPoint);

#three #3D그래픽 기본 개념