panlensJS

프로젝트 소개

1. 개발기간

2022.04.15~2022.04.22

2. 프로젝트 개요

360도 이미지를 활용하여 가상 투어 시스템 구축

기술 스택

Use

Tool

구현 기능

[이미지]

1. 마우스 드래그로 360도 이미지 회전
2. 첫 진입시 화면(이미지) 자동 회전
3. 마우스 휠로 줌 인/아웃 구현
4. 이미지 위에 infospot 버튼, infospot에 마우스 오버시 정보 출력
5. infospot 클릭시 해당 spot으로 화면 포커스(해당 spot이 화면 중앙으로 오게 이동)
6. 이미지 위에 화살표 버튼 클릭시 연결된 다른 이미지로 이동
7. 다른 이미지 이동시 로딩 시간 걸릴 경우 상단에 로딩바로 상태 표시

[하단 네비게이션 바]

1. OwlerCarousel 이용해 다음 이미지 슬라이드 미리보기 및 클릭시 이동
2. 각 버튼위에 마우스 오버시 툴팁 표시
3. 상태바 숨김/표시 버튼
4. 음악 재생/정지 버튼
5. 화면 자동 회전 기능 끄기/켜기 버튼

[음악]

1. howler.js를 이용, 화면 진입후 마우스 상호작용 있을시 음악 자동 재생 시작
2. 음악 반복 재생