Three.js를 활용한 3D 인터랙션에 도전하고자, 게임 컨셉의 인터랙티브 포트폴리오를 기획·개발했습니다.
홈 화면의 자동차 시뮬레이션으로 단순 관람을 넘어 직접 조작하고 경험하는 재미를 더했습니다.
Next.js App Router 기반 SSR 및 Metadata API를 적용하여 SEO를 고려한 구조로 구현했습니다.

• 외부 3D 에셋을 기반으로 GLTFLoader를 활용하여 차량, 나무, 바위 등 3D 모델(.glb)을 로드하고 환경을 구축했습니다.
• SkeletonUtils를 이용해 스켈레톤 및 애니메이션 데이터를 보존하며 모델을 복제하여, 리소스 최적화와 동시에 다량의 오브젝트를 효율적으로 렌더링했습니다.
• 차량의 정지/주행/부스터 상태에 따라 AnimationMixer를 통한 자연스러운 상태 전환 애니메이션을 구현했습니다.
• 카메라는 lerp를 활용한 부드러운 보간으로 차량을 추적하며, setViewOffset으로 감각적인 화면 구도를 연출했습니다.
• 입력창 타이핑 시 조작 방지 및 방향키 스크롤 차단 등 웹 환경에 최적화된 컨트롤 시스템을 구축했습니다.
• 페이지 전환 시 렌더링 루프 중단 및 메모리 dispose 처리를 통해 자원 누수를 철저히 방지했습니다.

• Tailwind CSS를 활용하여 좌측 네비게이션과 우측 컨텐츠 패널로 구성된 "게임 메뉴" 느낌의 일관된 디자인 시스템 구축.
• 초기 진입/페이지 전환 때 로딩 화면을 보여줘서, 자동차 시뮬레이션이 준비되기 전에 화면이 비어있지 않게 했습니다.
• 배경으로 자동차 시뮬레이션을 유지하여 대시보드 패널(좌측 네비 + 우측 컨텐츠) 구조로 “게임 메뉴” 느낌을 유지했습니다.
• 프로젝트 목록은 퀘스트 창으로 보여주고, 키워드(프로젝트명/스택/역할 등)로 바로 검색되게 했습니다.
• 기본 스크롤바를 컨셉에 맞게 수정하였습니다.

• 모바일에서도 자동차 시뮬레이션을 즐길 수 있도록 좌측 하단에 가상 조이스틱, 우측 하단에 BOOST 패드를 추가했습니다.
• 조이스틱이 가리키는 방향으로 차가 자연스럽게 회전하며 직진하도록 만들어, 키보드 없이도 직관적으로 조작할 수 있게 했습니다.
• 조이스틱 입력을 키보드 입력과 동일한 방식으로 처리해, 데스크탑과 모바일이 같은 코드를 공유하면서 동작하도록 구성했습니다.
• 모바일에서는 일부 렌더 옵션을 가볍게 조정해, 데스크탑보다 부담이 큰 환경에서도 부드럽게 동작하도록 최적화했습니다.
• 가로/세로 방향과 터치 디바이스 여부를 감지하여, 세로 모드에서는 회전 안내, 대시보드 페이지에서는 데스크탑 권장 안내를 노출하는 등 환경별 진입을 분리했습니다.

• Next.js App Router 기반 아키텍처를 설계하여 SSR과 Metadata API를 활용한 동적 메타데이터 및 검색 엔진 최적화(SEO)를 적용했습니다.
• Server Components 기반 구조로 초기 로딩 성능과 유지보수성을 개선했습니다.

PJun Portfolio 프로젝트를 진행하며 Three.js를 활용한 3D 홈 화면을 고민하는 과정에서 자동차 시뮬레이션 뿐만 아니라
우주를 배경으로 프로젝트를 행성처럼 표현도 해보고 1인칭 시점으로 플레이 하는 홈 화면도 구현해보며 새로운 경험을 할 수 있었습니다.
이러한 시도들을 통해 3D 인터렉션 설계에 대한 이해를 넓혀갈 수 있었습니다.
향후에는 Three.js에 게임 엔진을 추가하여 보다 정교하고 기술적인 3D 인터렉션 구현해보고 싶습니다.