Hello Three.js

<aside> 💡 Three.js r125 버전부터는 Geometry가 제거되었습니다. 대신 Geometry(primitives Geometry)는 내부적으로 BufferGeometry를 사용합니다.

</aside>

스크린샷 2024-08-28 오후 12.55.20.png

<aside> 💡 BufferGeometry는 Three.js에서 3D 객체의 모양(Shape)을 정의합니다.

</aside>

3D 이해하기

3D 공간이나 물체는 데카르트 좌표계(Cartesian coordinate system)로 표현됩니다. 폴리곤을 구성하는 각 정점(vertex)도 이 데카르트 좌표계에서 특정 위치를 가지게 됩니다. 예를 들어, 간단한 3D 물체인 정육면체를 생각해보면, 이 정육면체는 8개의 정점을 가지고 있습니다. 이 정점들이 4개씩 모여 하나의 면을 이루며, 정육면체는 총 6개의 면(폴리곤)으로 구성됩니다. 렌더링 과정에서는 계산의 효율성을 위해 이 면들이 최소 단위인 삼각형으로 분할되며, 정육면체는 최종적으로 12개의 삼각형 폴리곤으로 구성됩니다.

Group 27454.png

BufferGeometry

BufferAttribute라고 부르는 속성의 집합이고, BufferAttribute는 위치(positions), 법선(normals), 색(colors), uv 데이터의 배열입니다.

const vertices = [
  // 앞쪽
  { pos: [-1, -1,  1], norm: [ 0,  0,  1], uv: [0, 0], },
  { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
  { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0, 1], },
  //...
  ];

위치(positions)

position은 객체의 정점(Vertices) 좌표를 나타냅니다. 여기서 정점은 3D 객체를 구성하는 기본 요소입니다. 여러 정점이 모여 면(Face)을 이루고, 면들이 모여 3D 객체가 형성됩니다. 예를 들어, 삼각형은 3개의 정점으로 구성되고, 이 정점들이 삼각형의 면을 형성합니다.

positions.png

법선(normals)

normals의 x, y, z 값으로 표현된 법선 벡터는 객체의 표면이 3D 공간에서 어떤 방향을 향하고 있는지를 나타냅니다. 이 정보는 광원과의 관계를 통해 표면이 어떻게 조명에 반응하는지, 즉 어디가 밝고 어두운지를 결정하는 데 사용됩니다. 따라서 법선 벡터는 3D 그래픽에서 현실적인 조명 효과를 구현하는 데 매우 중요한 역할을 합니다.

norm: [ 0,  0,  1], // 첫 번째 정점의 법선 벡터 
norm: [ 0,  0,  1], // 두 번째 정점의 법선 벡터
norm: [ 0,  0,  1], // 세 번째 정점의 법선 벡터

normals.png