체육센터
3D 가상 체험 플랫폼
WebGL · Three.js 기반으로 체육센터의 실내 공간을 3D로 구현. 방문 전 온라인에서 헬스장·로비·탈의실을 자유롭게 탐색하고 운동기구와 인터랙션.
3D Viewer Preview // Bird's Eye + Walk View
트레드밀 실시간 연동 // IoT Live Data Sync
📡 IoT 실시간 데이터 수신
Bluetooth/WiFi 트레드밀 IoT 모듈에서 속도·경사·심박수·칼로리를 WebSocket으로 실시간 전송. 12ms 미만 지연으로 3D 화면과 모바일 앱 동시 업데이트.
🎮 3D 기구 하이라이트
연동된 기구(TM03)는 3D 공간에서 사이언 글로우 + 대시 아웃라인으로 시각적 강조. 운동 중 벨트 UV 스크롤 애니메이션으로 실제 구동 표현.
📱 모바일 라이브 패널
속도 10.0km/h 대형 디스플레이 · 20분 HR 그래프 · 칼로리 링 차트 · 속도 바 차트. 일시정지·종료·3D뷰 전환 버튼 원터치 제공.
🏋️ 리얼리스틱 3D 렌더
5대 트레드밀 (풀 디테일) · 4대 스핀바이크 · 3개 웨이트랙 · 천장 다운라이트 6개 · 미러 백월. Three.js GLTF 로딩 + 커스텀 셰이더 조합.
Overview // 방문 전 온라인 체험
WebGL 기반 3D 공간 탐색
실제 체육센터의 공간을 Blender로 3D 모델링하고 Three.js WebGL 엔진으로 브라우저에서 렌더링합니다. 별도 앱 설치 없이 크롬·엣지·사파리에서 바로 실행됩니다.
마우스 드래그로 시점을 자유롭게 회전하고, 클릭·버튼으로 로비 → 접수 → 탈의실 → 헬스장 동선을 따라 이동할 수 있습니다.
인터랙티브 요소
트레드밀·사이클·웨이트 머신 등 운동기구를 클릭하면 상세 설명 팝업이 표시됩니다. 기구 이름, 타겟 근육, 사용 방법, 예약 가능 여부를 즉시 확인합니다.
공간 이동 시 부드러운 카메라 애니메이션으로 몰입감을 제공하며, 모바일에서는 터치 제스처로 동일한 경험을 구현합니다.
User Flow // 가상 동선 탐색
Mobile Responsive // Touch · Gesture
📱 터치 제스처 지원
Two-finger pinch로 줌인/아웃, 단일 손가락 드래그로 카메라 회전. Three.js OrbitControls의 터치 이벤트를 최적화하여 모바일에서도 60fps 유지.
🔄 반응형 레이아웃
브레이크포인트별 Canvas 크기 동적 조절. 모바일에서는 HUD 버튼 크기 확대, 공간 이동 버튼 하단 배치로 한 손 조작 최적화.
⚡ 모바일 성능 최적화
LOD(Level of Detail) 기법 적용 — 거리별 폴리곤 수 자동 감소. WebGL2 미지원 기기는 자동으로 WebGL1 폴백. 텍스처 압축(KTX2/Basis) 사용으로 로딩 50% 단축.
🗺️ 미니맵 네비게이션
화면 우상단에 평면도 미니맵 항시 표시. 현재 위치·시야 방향 실시간 반영. 미니맵 탭으로 해당 공간 즉시 이동.
주요 기능 // features
3D 공간 체험
Blender GLTF 모델 → Three.js 렌더링. 로비·접수·탈의실·헬스장 4개 공간을 실제 치수 기반으로 구현. 마우스 드래그 시점 회전.
인터랙티브 기구 정보
Raycasting으로 운동기구 클릭 감지. 기구명·타겟근육·사용법·예약현황 팝업 표시. 호버 시 하이라이트 효과.
공간 이동 애니메이션
GSAP Tween으로 카메라 부드러운 이동. 동선 버튼 클릭 시 지정 위치로 cinematic 이동. 2~3초 전환 애니메이션.
미니맵 & 안내 UI
Canvas 2D 평면도 미니맵 상시 표시. 현재 위치·시야각 실시간 반영. 공간별 HUD 텍스트 오버레이.
관리자 CMS
Node.js + Express 백엔드. 기구 정보·팝업 텍스트·이미지 편집. 공간 소개 문구 관리. 코드 수정 없이 콘텐츠 업데이트.
반응형 & 크로스브라우저
PC/모바일 반응형. Chrome·Edge·Safari·Firefox 호환. WebGL2/1 자동 폴백. 터치 제스처 최적화.