# 웹 클라이언트

브라우저에서 실행되는 원격 모션캡쳐 클라이언트입니다.

## 🌐 주요 기능

- 실시간 3D 아바타 렌더링 (Three.js)
- WebSocket을 통한 Unity 서버 연결
- 모션 녹화 제어 인터페이스
- 다양한 포맷으로 모션 파일 출력

## 📁 파일 구조

```
WebClient/
├── index.html              # 메인 웹페이지
├── css/
│   └── style.css          # 스타일시트
├── js/
│   ├── main.js            # 앱 초기화 및 전체 로직
│   ├── websocketClient.js # WebSocket 통신 관리
│   ├── motionViewer.js    # Three.js 3D 렌더링
│   ├── motionRecorder.js  # 모션 데이터 녹화
│   └── motionExporter.js  # 파일 출력 (BVH, FBX, JSON)
└── assets/
    └── models/            # 3D 아바타 모델 파일
```

## 🚀 실행 방법

### 방법 1: 직접 열기
```bash
# WebClient 폴더에서
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux
```

### 방법 2: 로컬 서버 (권장)
```bash
# Python 3
python -m http.server 8000

# Node.js
npx http-server

# PHP
php -S localhost:8000
```

## 🎮 사용법

1. **연결**: Unity 서버 IP와 포트 입력 후 연결
2. **관찰**: 실시간 3D 아바타 움직임 확인
3. **녹화**: "녹화 시작" 버튼으로 모션 캡쳐
4. **출력**: 원하는 포맷으로 모션 파일 다운로드

## ⚙️ 설정

### 연결 설정
- **서버 주소**: Unity 서버 IP (기본: localhost)
- **포트**: WebSocket 포트 (기본: 8080)

### 녹화 설정
- **파일명**: 출력될 파일 이름
- **프레임레이트**: 24/30/60 FPS 선택
- **포맷**: BVH, FBX, JSON 중 선택

## 🔧 개발

### 의존성
- Three.js (3D 렌더링)
- WebSocket API (브라우저 내장)

### 모듈 구조
각 JavaScript 파일은 독립적인 클래스로 구성되어 모듈화되어 있습니다.