Terracotta

• 마인크래프트 건축물 공유 플랫폼
• 건축물 3D viewer 제공

사용 기술

• Next.js: v13.4.5
• React: v18.2.0
• TypeScript: v5.1.3
• Three.js: v0.155.0
• zustand: v4.4.7
• zod: v3.22.4
• react-hook-form: v7.49.3

---

건축물 3D Viewer

• 다양한 블록 데이터를 기반으로 3D 모델을 생성하고 관리하는 시스템을 구축
• 필요한 3D 모델과 텍스처를 동적으로 로딩하여 메모리 사용 최소화
  1. 지연 로딩: 3D 모델과 텍스처는 필요할 때만 로딩. 사용자가 특정 블록을 요청하거나 화면에 나타날 때 해당 리소스를 로딩하여 메모리 사용 최소화
  2. 캐싱 시스템: 이미 로딩된 텍스처와 모델은 캐시에 저장되어, 동일한 리소스를 다시 요청할 때 빠르게 접근. 이를 통해 불필요한 중복 로딩을 방지하고 성능 향상
  3. 최적화된 텍스처 로딩: 텍스처 로딩 시, 최적화 모드에 따라 필터링 옵션을 조정하여 메모리 사용을 줄이고, 그래픽 품질을 유지

주요 기능 소개

1. 좌측 상단 아이콘 메뉴

   1. 전체화면 버튼

   2. 키보드 컨트롤 - 마우스 컨트롤 토글 버튼 (키보드 컨트롤은 전체화면에서만 지원)

   3. 건축물 재료 팝업 노출

      

   4. 조작 가이드 노출 토글 버튼

2. 블럭 마우스 오버 표시
3. 2번에서 마우스 오버한 블럭에 대한 정보
4. 현재 Viewer FPS
5. 뷰어 조작 패널
   1. 최적화 모드 체크박스
      • 빛, 풀, 꽃 등 꾸밈 요소가 제거되고 건축물의 형태와 재료만 확인할 수 있는 모드
   2. 카메라 컨트롤
      • 정면, 측면 등 특정 위치로 바로 이동
      • 현재 위치 표시 및 마우스로 현재 위치 위치 이동
      • 현재 위치 저장 및 삭제 기능
   3. 빛 컨트롤
      • 광원 위치 컨트롤
      • 빛 방향 위치 컨트롤
6. 패널 변경사항 저장 기능

1. 블럭 노출 조작 패널
   1. 블럭 노출 범위 설정
   2. 특정 블럭 종류 노출 제한
2. 시작 블럭 클릭 > 끝 블럭 클릭 하면 범위 선택 블럭이 노출된다.
3. 2에서 선택한 범위의 사이즈 정보가 노출된다.