데스크탑에서는 화살표와 WSAD 키로 이동할 수 있고, 모바일에서는 nipple.js를 사용하여 조이스틱 기반의 이동 기능을 추가했습니다. 이를 통해 직관적인 터치 조작이 가능하게 하여 디바이스 환경에서 일관된 사용자 경험을 제공하고자 하였습니다.
다형성을 활용한 Three.js 클래스 상속
VR 전시장 내부의 다양한 오브젝트와 인터랙션 구현 시 Three.js의 부모 클래스를 상속하여 다형성을 적용했습니다. 이를 통해 코드 재사용성을 높이고, 각 오브젝트가 고유한 기능을 유지하면서도 공통된 부모 클래스의 기능을 공유할 수 있도록 설계했습니다.
💥 트러블 슈팅
1인칭 컨트롤 구현
1인칭 슈터(FPS)와 같은 사용자 조작을 지원하기 위해 Three.js의 PointerLockControls를 활용했습니다. 초기에는 사용자 움직임과 시점 변경 간의 독립적 컨트롤이 어려움을 겪었습니다. PointerLockControls의 상위 클래스인 EventDispatcher를 상속하여 각 컨트롤을 세부적으로 조작할 수 있도록 커스터마이징했습니다. 이 과정에서 특정 이벤트를 개별적으로 통제하여, 움직임과 시점 변화가 자연스럽게 연결되도록 조정하였습니다.
