거실과 재생 화면 · 1 / 3
주요 기능
- 3D 공간과 카메라
- TV 화면 속 영상: TV 화면 내에 YouTube 플레이어를 매핑해 실제 TV에서 재생되는 듯한 장면 구현
- 카메라 시점: 드래그로 거실을 둘러보거나 기본·거실·TV 정면 시점으로 전환
- 영상과 플레이리스트
- 커스텀 플레이리스트: 나만의 영상 플레이리스트를 만들어 연속 영상 시청 가능.
- 실시간 검색: YouTube API 연동을 통해 영상을 검색해 플레이리스트에 추가 가능
- 재생 제어: 하단 제어 컨트롤러 패널에서 재생·볼륨·플레이리스트 관리
- 집중 타이머와 분위기
- 집중 시간과 취침 예약을 설정하고, 비 오는 새벽·조용한 밤·노을 지는 방으로 분위기 전환
사용 기술
언어·프레임워크
Next.jsTypeScript
화면·인터랙션
Three.jsReact Three FiberFramer MotionTailwind CSS
- Three.js · React Three Fiber
- 3D 공간과 TV 화면 속 플레이어를 구성했습니다.
- 카메라 시점 전환
- 공간을 다른 각도에서 탐색하는 카메라 조작에 사용했습니다.