React Three Fiber 프로젝트 기술 분석 - 개요

프로젝트 개요

웹 기반 3D 뷰어 시스템을 구현하며 사용한 기술들을 정리합니다.

---

기술 스택

---

기술 선택 이유

Three.js가 아닌 React Three Fiber를 선택한 이유

1. 선언적 코드

// Three.js - 명령형
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 'blue' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// cleanup 직접 처리
scene.remove(mesh);
geometry.dispose();
material.dispose();

// React Three Fiber - 선언적
<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="blue" />
</mesh>
// cleanup은 React가 자동 처리

R3F는 Three.js 객체를 React 컴포넌트로 추상화합니다. 메모리 관리, 리렌더링 최적화를 React에 위임할 수 있어 코드가 간결해집니다.

2. 상태 관리 통합

React 상태 관리 라이브러리와 자연스럽게 연동됩니다.

const { explodeLevel } = useModelStore();
// 상태 변경 시 3D 씬 자동 업데이트

3. 생태계 활용

@react-three/drei가 제공하는 유틸리티로 보일러플레이트를 줄입니다:

• OrbitControls - 카메라 컨트롤
• TransformControls - 객체 변환
• useGLTF - 모델 로딩
• Environment - 환경맵

---

Zustand를 선택한 이유

1. 보일러플레이트 최소화

// 스토어 정의 전체
const useModelStore = create((set) => ({
  explodeLevel: 0,
  setExplodeLevel: (level) => set({ explodeLevel: level }),
}));

// 사용
const { explodeLevel } = useModelStore();

Redux라면 action type, action creator, reducer, selector, provider 설정이 필요합니다.

2. React 외부에서 접근 가능

useFrame 같은 Three.js 렌더 루프에서는 React 훅을 직접 호출할 수 없습니다. Zustand는 getState()로 훅 없이 상태에 접근 가능합니다.

useFrame(() => {
  // React 훅 사용 불가 영역
  const { explodeLevel } = useModelStore.getState();
  mesh.position.lerp(targetPosition, 0.1);
});

3. 선택적 구독

필요한 상태만 구독해 불필요한 리렌더를 방지합니다.

// explodeLevel만 구독 - 다른 상태 변경 시 리렌더 안됨
const explodeLevel = useModelStore((state) => state.explodeLevel);

---

프로젝트 구조

├── components/
│   ├── ThreeCanvas.tsx       # Canvas 설정, 포스트 프로세싱
│   ├── ModelViewer.tsx       # GLTF 모델 로더
│   ├── TestModel.tsx         # 메쉬 렌더링, 선택/이동
│   ├── ShaderControlPanel.tsx # 렌더링 파라미터 UI
│   ├── MeshListPanel.tsx     # 메쉬 목록 표시
│   ├── FileUploader.tsx      # 모델 업로드
│   ├── AssemblySlider.tsx    # 분해 슬라이더
│   └── LightingSetup.tsx     # 조명 설정
├── zustand/
│   ├── useModelStore.ts      # 모델 상태
│   └── useRenderStore.ts     # 렌더링 상태
└── types/
    └── index.ts              # 타입 정의

---

시리즈: React Three Fiber 기술 분석

1. 개요 ← 현재 글
2. Explode View 구현
3. 메쉬 선택/이동
4. 포스트 프로세싱
5. Zustand 상태 관리