InteractiveREALTIME CLIENT
Game Client
로그인과 게임 패널은 React로, 딜러와 카드는 Three.js로 구현했습니다. 서버 이벤트와 게임 진행 단계에 맞춰 UI와 3D 씬을 갱신했습니다.
서버 이벤트와 상태 관리
Socket.IO로 방에 참여하고 게임·사용자 이벤트를 받았습니다. 이벤트 처리는 XState 상태 머신에 모으고, 이전 게임 데이터에서 바뀐 부분을 하위 상태 머신에 전달했습니다.
게임 단계별 UI와 입력 제어
로그인 상태와 게임 진행 단계를 구분해 관리했습니다. 대기·베팅·딜링·결과 단계에 맞춰 패널과 타이머, 입력 가능 여부를 바꿨습니다. React 컴포넌트는 필요한 상태를 구독해 화면을 갱신했습니다.
Animation & Rendering
애니메이션 클립과 IK 전환
딜링 구간에서는 IK로 손 위치를 맞추고, 나머지 동작은 애니메이션 클립으로 재생했습니다. 두 방식이 같은 본을 동시에 제어하지 않도록 클립 재생 중에는 IK 업데이트를 건너뛰었습니다.
카드 인스턴싱
InstancedMesh로 카드의 geometry와 material을 공유했습니다. 카드별로 텍스처 아틀라스의 UV 영역을 지정해 숫자와 무늬를 다르게 표시했습니다.
Geometry + materialShared mesh
Transform + UVPer instance
Instanced cardsShared geometry · individual appearance
