🔧 Simvex

SIMVEX(3D 시각화 기반 학습 솔루션) - 이공계 학생을 위한 과학/공학 학습용 3D 뷰어 기반 학습 솔루션

---

🛠 Tech Stack

Core & Build

3D Rendering

Animation & Interaction

State Management & Routing

---

📱 프로젝트 소개

Simvex는 3D 뷰어로 인터랙티브하게 학습할 수 있는 웹 기반 시뮬레이터입니다.

✨ 핵심 기능

• 3D 부품 뷰어: 실시간으로 부품을 회전하고 확대하여 관찰
• 상태 유지: 페이지 이동 후 돌아와도 마지막 시점 그대로 유지
• 스크롤 애니메이션: 스크롤에 따라 부품이 조립/분해되는 애니메이션
• 인터랙티브 학습: 부품별 상세 정보 및 학습 자료 제공

---

📂 Project Structure

src/
├── components/
│   ├── 3d/           # 3D 관련 컴포넌트
│   │   ├── PartViewer.tsx
│   │   ├── Model.tsx
│   │   └── ScrollAnimation.tsx
│   └── layout/       # 레이아웃 컴포넌트
├── stores/           # Zustand 상태 관리
│   └── viewStateStore.ts
├── assets/
│   └── models/       # 3D 모델 파일 (.glb, .gltf)
├── pages/            # 페이지 컴포넌트
├── types/            # TypeScript 타입 정의
└── utils/            # 유틸리티 함수

---

📝 Naming Convention

분류	규칙	예시
변수/함수	camelCase	partPosition, loadModel()
컴포넌트	PascalCase	PartViewer.tsx, Model.tsx
상수	SCREAMING_SNAKE	MAX_ZOOM_LEVEL, MODEL_PATH
폴더	kebab-case	3d-viewer, part-list

---

💾 Git & Commit Convention

브랜치 전략

타입	설명	예시
feature	새로운 기능 개발	feature/3d-viewer
fix	버그 수정	fix/camera-position-error
refactor	코드 리팩토링	refactor/state-management

💬 Commit Message

태그	설명
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정
style	코드 포맷팅
refactor	코드 리팩토링
chore	빌드/패키지 설정

예시

feat: 3D 부품 뷰어 구현
fix: 카메라 위치 저장 오류 수정
feat: 스크롤 조립 애니메이션 추가

---

🚀 개발 환경 설정

필수 요구사항

• Node.js 18.x 이상
• npm 또는 yarn

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

주요 라이브러리 설치

npm install three @react-three/fiber @react-three/drei
npm install zustand react-router-dom
npm install @react-spring/three framer-motion
npm install @types/three -D

---

👥 Team Members

HexabrewD