🎭 ChatterPals 3D Character Web Display System

Unity 설치 없이 웹브라우저에서 3D 캐릭터를 표시하는 시스템입니다! 🚀✨

🌟 주요 특징

✅ Unity 설치 불필요

• 웹브라우저에서 직접 실행
• 별도 소프트웨어 설치 불필요
• 모든 플랫폼 지원 (Windows, macOS, Linux, Android, iOS)

🎮 3D 캐릭터 기능

• 다양한 캐릭터 타입 (큐브, 구체, 원통, 커스텀)
• 실시간 3D 애니메이션
• 인터랙티브 카메라 컨트롤
• 동적 조명 및 그림자
• 파티클 효과 시스템

🎨 시각적 효과

• 5가지 그라데이션 배경
• 반투명 UI 패널
• 로딩 애니메이션
• 인사 메시지 애니메이션
• 반응형 디자인

🚀 빠른 시작

1. 의존성 설치

# Node.js가 설치되어 있어야 합니다 (v14.0.0 이상)
npm install

2. 서버 시작

npm start

3. 브라우저에서 접속

http://localhost:3003
또는
http://localhost:3003/CharacterScreenDisplayForceFixer

🎯 사용법

기본 컨트롤

캐릭터 생성 및 조작

• 캐릭터 타입: 큐브, 구체, 원통, 커스텀 중 선택
• 크기 조절: 슬라이더로 0.5 ~ 3.0 배율 조정
• 색상 변경: 컬러 피커로 원하는 색상 선택
• 애니메이션 속도: 0 ~ 0.05 범위에서 조정

인터랙티브 기능

• 마우스: 드래그로 카메라 회전, 휠로 줌 인/아웃
• 터치: 모바일에서 멀티터치 제스처 지원
• 키보드: 자동 애니메이션 토글

고급 기능

씬 제어

• 🎭 캐릭터 생성: 선택한 설정으로 새 캐릭터 생성
• 🔄 씬 리셋: 모든 설정을 기본값으로 초기화
• ⏯️ 애니메이션 토글: 애니메이션 시작/정지
• 👋 인사하기: 환영 메시지 표시

시각적 효과

• 💡 조명 추가: 랜덤 위치에 포인트 라이트 추가
• ✨ 파티클 추가: 100개의 컬러풀한 파티클 생성
• 🎨 배경 변경: 5가지 그라데이션 배경 순환

🏗️ 기술 스택

프론트엔드

• Three.js: 3D 그래픽 라이브러리
• WebGL: 하드웨어 가속 3D 렌더링
• HTML5: 시맨틱 마크업
• CSS3: 모던 스타일링 및 애니메이션
• JavaScript ES6+: 모던 JavaScript 기능

백엔드

• Node.js: 서버 런타임
• Express.js: 웹 프레임워크
• RESTful API: JSON 기반 API

3D 그래픽

• 지오메트리: Box, Sphere, Cylinder, Custom
• 머티리얼: PhongMaterial (반사, 투명도 지원)
• 조명: Ambient, Directional, Point Light
• 애니메이션: Rotation, Position, Scale
• 카메라: PerspectiveCamera + OrbitControls

📱 플랫폼 지원

데스크톱

• ✅ Windows 10/11
• ✅ macOS 10.15+
• ✅ Linux (Ubuntu, CentOS, etc.)

모바일

• ✅ Android 6.0+ (Chrome, Firefox, Samsung Internet)
• ✅ iOS 12.0+ (Safari, Chrome)

브라우저

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

🔧 개발 환경 설정

개발 모드 실행

npm run dev

파일 구조

chatterpals-3d-character-web/
├── CharacterWebDisplaySystem.html    # 메인 3D 캐릭터 페이지
├── webServer.js                      # Express 웹 서버
├── package.json                      # 프로젝트 설정
├── README.md                         # 프로젝트 문서
└── node_modules/                     # 의존성 패키지

API 엔드포인트

GET /                              # 메인 페이지
GET /CharacterScreenDisplayForceFixer  # 3D 캐릭터 페이지
GET /api/character/info            # 캐릭터 정보
GET /api/status                    # 서버 상태

🎨 커스터마이징

캐릭터 추가

// 새로운 캐릭터 타입 추가
case 'pyramid':
    geometry = new THREE.ConeGeometry(size, size * 2, 4);
    break;

새로운 효과 추가

// 새로운 시각적 효과 함수
function addRainbowEffect() {
    // 무지개 효과 구현
}

UI 수정

/* 새로운 스타일 추가 */
.custom-button {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

🚨 문제 해결

일반적인 문제

3D 캐릭터가 보이지 않는 경우

1. WebGL 지원 확인: https://get.webgl.org/
2. 브라우저 업데이트
3. 하드웨어 가속 활성화
4. 그래픽 드라이버 업데이트

성능이 느린 경우

1. 캐릭터 크기 줄이기
2. 파티클 수 줄이기
3. 그림자 품질 낮추기
4. 브라우저 하드웨어 가속 확인

모바일에서 문제가 있는 경우

1. 모바일 브라우저 업데이트
2. 터치 제스처 확인
3. 화면 방향 잠금 해제
4. 배터리 절약 모드 비활성화

개발자 도구

// 콘솔에서 디버그 정보 확인
console.log('Scene:', scene);
console.log('Camera:', camera);
console.log('Character:', character);

// 성능 모니터링
const stats = new Stats();
document.body.appendChild(stats.dom);

🔮 향후 계획

v1.1.0 (예정)

• 더 많은 캐릭터 타입 추가
• 텍스처 및 머티리얼 시스템
• 사운드 효과 추가
• 애니메이션 키프레임 시스템

v1.2.0 (예정)

• VR/AR 지원
• 멀티플레이어 기능
• 캐릭터 저장/로드
• 커스텀 셰이더 지원

v2.0.0 (예정)

• AI 기반 캐릭터 애니메이션
• 실시간 음성 인식
• 클라우드 기반 캐릭터 공유
• 크로스 플랫폼 동기화

🤝 기여하기

버그 리포트

1. GitHub Issues에서 새 이슈 생성
2. 문제 상황 상세 설명
3. 브라우저 및 OS 정보 포함
4. 재현 단계 명시

기능 제안

1. GitHub Discussions에서 토론 참여
2. 상세한 사용 사례 설명
3. 구현 아이디어 제시

코드 기여

1. Fork 후 브랜치 생성
2. 기능 개발 및 테스트
3. Pull Request 생성
4. 코드 리뷰 참여

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

🙏 감사의 말

• Three.js: 3D 그래픽 라이브러리
• Express.js: 웹 프레임워크
• WebGL: 3D 렌더링 표준
• ChatterPals Community: 아이디어 및 피드백

📞 연락처

• GitHub: ChatterPals 3D Character Web
• 이슈: GitHub Issues
• 토론: GitHub Discussions

---

🎭 Unity 설치 없이 웹브라우저에서 3D 캐릭터를 즐겨보세요! 🚀✨