[Three.js] Geometry, Materials, Mesh

Three.js에서 3D Object를 구성하는 세 가지 핵심 요소인 Geometry와 Materials, 그리고 Mesh에 대해 알아보자.

Geometry란?

Geometry는 3D 객체의 형태를 정의하는 꼭지점(vertices)과 면(faces), 선(line)의 집합이다. 쉽게 말해서 3D 물체의 '골격'이라고 생각하면 된다. 아래 예제 코드를 보자.

// 사용자 정의 삼각형 만들기
const geometry = new THREE.BufferGeometry();

// 삼각형의 꼭지점 좌표
const vertices = new Float32Array([
    -1.0, -1.0, 0.0,  // v0
     1.0, -1.0, 0.0,  // v1
     0.0,  1.0, 0.0   // v2
]);

// 버퍼 속성으로 지오메트리에 할당
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));