1. 개발기간
2022.04.15~2022.04.22
2. 프로젝트 개요
360도 이미지를 활용하여 가상 투어 시스템 구축
Use
Tool
- 마우스 드래그로 360도 이미지 회전
- 첫 진입시 화면(이미지) 자동 회전
- 마우스 휠로 줌 인/아웃 구현
- 이미지 위에 infospot 버튼, infospot에 마우스 오버시 정보 출력
- infospot 클릭시 해당 spot으로 화면 포커스(해당 spot이 화면 중앙으로 오게 이동)
- 이미지 위에 화살표 버튼 클릭시 연결된 다른 이미지로 이동
- 다른 이미지 이동시 로딩 시간 걸릴 경우 상단에 로딩바로 상태 표시
- OwlerCarousel 이용해 다음 이미지 슬라이드 미리보기 및 클릭시 이동
- 각 버튼위에 마우스 오버시 툴팁 표시
- 상태바 숨김/표시 버튼
- 음악 재생/정지 버튼
- 화면 자동 회전 기능 끄기/켜기 버튼
- howler.js를 이용, 화면 진입후 마우스 상호작용 있을시 음악 자동 재생 시작
- 음악 반복 재생