Streamingle_URP/RemoteMotionCapture/WebClient/README.md

웹 클라이언트

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

🌐 주요 기능

• 실시간 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: 직접 열기

# WebClient 폴더에서
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

방법 2: 로컬 서버 (권장)

# 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 파일은 독립적인 클래스로 구성되어 모듈화되어 있습니다.