77 lines
2.0 KiB (Stored with Git LFS)
Markdown
77 lines
2.0 KiB (Stored with Git LFS)
Markdown
# 웹 클라이언트
|
|
|
|
브라우저에서 실행되는 원격 모션캡쳐 클라이언트입니다.
|
|
|
|
## 🌐 주요 기능
|
|
|
|
- 실시간 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 파일은 독립적인 클래스로 구성되어 모듈화되어 있습니다.
|