학습 프로젝트 (2023.12 ~ 2024.01)
WebGL 기반 3D 그래픽 라이브러리 Three.js와 CANNON.js 물리엔진, Socket.io를 활용해
실시간 다중 사용자 메타버스 환경을 구축한 프로젝트입니다.
이 프로젝트는 Three.js의 기초 학습을 넘어, 실시간 상호작용이 가능한 메타버스 환경을 구현하는 것을 목표로 진행되었습니다.
- 단순한 3D 렌더링을 넘어, 중력·충돌·마찰 등 물리적 사실성을 반영
- 사용자 입력 기반 캐릭터 제어를 통해 가상공간에서 자유로운 이동 가능
- 실시간 네트워크 통신을 활용하여 다수의 사용자가 동시에 같은 공간에 접속, 함께 활동할 수 있도록 설계
-
3D 캐릭터 이동 제어
키보드 입력 이벤트(WASD 등)를 기반으로 사용자가 직접 캐릭터를 조작 -
물리엔진 적용 (CANNON.js)
- 중력 반영: 캐릭터가 자연스럽게 지면에 떨어짐
- 충돌 처리: 벽/바닥 등 오브젝트와 부딪힐 때 반응
- 마찰 효과: 움직임이 현실감 있게 구현
-
Three.js 시각화
- 3D 환경 및 오브젝트 렌더링
- 물리엔진과 연동하여 시각적으로 자연스러운 움직임 구현
-
실시간 동기화 & 채팅 (Socket.io)
- 다중 사용자 접속 시, 각 사용자의 위치 정보가 실시간 반영
- 간단한 채팅 기능을 통해 사용자 간 소통 가능
-
클라이언트-서버 분리
- 클라이언트: 사용자 입력, 3D 렌더링, UI 처리
- 서버: 네트워크 동기화, 이벤트 중계, 성능 최적화
| 분야 | 기술 |
|---|---|
| 3D 그래픽스 | Three.js |
| 물리엔진 | CANNON.js |
| 네트워킹 | Socket.io |
| 언어 | JavaScript |
| 기타 | Node.js 기반 서버 환경 |
- 사용자 접속: 클라이언트에서 서버로 연결
- 캐릭터 제어: 키보드 입력 → 물리엔진 → Three.js 렌더링
- 실시간 동기화: 사용자 위치/상태가 Socket.io를 통해 다른 사용자에게 전송
- 채팅 기능: 텍스트 메시지가 모든 접속자에게 공유
(여기에 3D 캐릭터 이동 장면, 다중 사용자 접속 화면 캡처 또는 GIF를 추가하면 좋습니다.)
-
캐릭터 이동 & 중력 적용
현실감 있는 3D 환경 속 이동 -
실시간 동기화
여러 사용자가 같은 공간에서 함께 활동
- Three.js: 기본 렌더링부터 카메라·조명·오브젝트 제어 학습
- CANNON.js: 물리 기반 상호작용 구현 경험
- Socket.io: 실시간 네트워크 통신 구조 이해
- 클라이언트/서버 분리 설계: 유지보수성과 확장성 확보
👉 단순한 그래픽 렌더링을 넘어, 실시간 상호작용형 메타버스의 기본 구조를 학습할 수 있었습니다.
- React 기반 리팩토링: 컴포넌트 단위 개발로 UI 관리 효율화
- 성능 최적화: Three.js와 CANNON.js의 연산 최적화, 불필요한 렌더링 최소화
- 코드 유지보수성 강화: 모듈화 및 폴더 구조 개선
- 시점 전환 기능: 1인칭 / 3인칭 뷰 전환 지원
- 애니메이션 추가: 캐릭터 걷기/점프 등 자연스러운 동작 구현
KakaoTalk_Video_2025-08-28-01-32-26.mp4
초기 실험 단계에 촬영한 영상입니다. 화질은 낮지만 실제 프로젝트 동작을 확인할 수 있습니다.