Three.js Geometry와 Primitives (왕사탕 토성 만들기를 곁들인)

date

Nov 9, 2024

slug

three-js-geometry-and-primitives

author

status

Public

tags

Three.js

summary

type

Post

thumbnail

category

updatedAt

Nov 10, 2024 01:13 PM

Primitives란?

Geometry의 이해

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);

const geometry = new THREE.BufferGeometry();

// 정점 데이터를 더 읽기 쉽게 구조화
const vertices = new Float32Array([
  // Front face
  -1.0, -1.0,  1.0,  // v0: 좌하단
   1.0, -1.0,  1.0,  // v1: 우하단
   1.0,  1.0,  1.0,  // v2: 우상단
  -1.0,  1.0,  1.0,  // v3: 좌상단
]);

// 각 정점당 x, y, z 3개의 값을 사용
geometry.setAttribute(
  'position', 
  new THREE.BufferAttribute(vertices, 3)
);

BufferGeometry? 너 누군데

핵심 특징

• ⚡ GPU 직접 처리: 데이터가 GPU가 바로 처리할 수 있는 형태로 저장됨

• 📦 효율적인 메모리 관리: TypedArray를 사용하여 메모리 최적화

• 🔧 높은 유연성: 사용자가 필요에 따라 속성을 추가/수정 가능

기본 구성 요소

데이터 구조의 이해

// 정점 데이터 예시
const positions = new Float32Array([
    // x,   y,   z    // 설명
    -1.0, -1.0, 1.0,  // 정점 0
     1.0, -1.0, 1.0,  // 정점 1
     1.0,  1.0, 1.0   // 정점 2
]);

const normals = new Float32Array([
    0, 0, 1,  // 정점 0의 법선
    0, 0, 1,  // 정점 1의 법선
    0, 0, 1   // 정점 2의 법선
]);

💡 정육면체 구성의 이해

총 정점 수 = 면 개수 × 삼각형/면 × 정점/삼각형
           = 6 × 2 × 3
           = 36개

• 면 6개: 앞, 뒤, 좌, 우, 위, 아래

• 각 면은 2개의 삼각형으로 구성

• 각 삼각형은 3개의 정점 필요

Three.js가 제공하는 주요 Geometry들

실전 예제: 토성 만들기 (Feat. 왕사탕 토성)

토성 분체 만들기 - SphereGeometry

const saturnGeometry = new THREE.SphereGeometry(1.5, 128, 128);

• 1.5: 구체의 반지름

• 128: 가로 세그먼트 수 (경도 방향 분할)

• 128: 세로 세그먼트 수 (위도 방향 분할)

토성의 고리 만들기 - (RingGeometry)

const ringGeometry = new THREE.RingGeometry(innerRad, outerRad, 256);

• innerRad: 내부 반지름 (2.0 ~ 3.5 범위로 설정)

• outerRad: 외부 반지름 (2.3 ~ 3.7 범위로 설정)

• 256: 세그먼트 수 (원의 둘레를 몇 개의 삼각형으로 분할할지)

고리 세부 구현

const rings = [
    createRing(2.0, 2.3, 0x3c3c3c, 0.9), // 가장 안쪽 고리
    createRing(2.3, 2.8, 0xb0a89b, 0.8),
    createRing(2.8, 3.2, 0x8b7355, 0.7),
    createRing(3.2, 3.5, 0x6d6152, 0.6),
    createRing(3.5, 3.7, 0x4a4a4a, 0.4)  // 가장 바깥쪽 고리
];

회전과 기울기 설정

const tilt = (15 * Math.PI) / 180; // 15도 기울기
rings.forEach((ring) => {
    ring.rotation.x = Math.PI / 2;  // 90도 회전 (수평 배치)
    ring.rotation.z = tilt;         // 15도 기울기 적용
});

마치며