저번에 올렸던 3d map 제작툴을 리뉴얼 하게 되었다.
저번에는 기간도 급박하고 해서 대표님께서 지시하신대로 단순히 krpano를 이용해서 자동화 스크립트만 작성했었는데, 이번에는 아예 panolens라는 javascript 라이브러리를 이용해서 직접 개발해 볼 계획이다. (https://pchen66.github.io/Panolens/) 튜토리얼이 친절한편은 아니지만, 예제 샘플들을 이용해서 개발중이다.
우선 계획한 기능들은
1. 파노라마 사진 -> 3d map 변환
2. 3d map간의 이동
3. 3d map안에 tag 추가 기능
4. tag 클릭시 텍스트, 이미지, 영상등을 표시
5. tag 수정 기능
이정도를 목표로 하고있다. 디자인 시안은 아직 안나와서 해당 기능들을 개발하며 업로드 할 예정이다.
일단 panolens는 viewer랑 panorama infospot등으로 이루어져있다. viewer는 해당 map을 보여주는 공간, panorama는 panorama 사진을 3d로 변환한 map, infospot은 해당 panorama에 등록하는 tag이다.
우선 내가 생각한 개발에 적용되는 구조는 다음과같다.
시스템 구조
viewer를 만든뒤 해당 viewer에서 panorama0, panorama1, panorama2, ... 등을 보여주며 서로간에 이동할 수 있는 형태이다. 그리고 각 panorama에는 infospot0, infospot1, infospot2, ... 이런 형태의 tag들이 들어가있다.
panorama[n]에 infospot배열이 매칭되는 구조이다.
그리고 생각한 웹사이트 구조는
웹사이트 구조
viewer에서 panorama들을 보여주고 panorama list에서 item을 클릭시 해당 파노라마로 이동한다. 그리고 infospot은 해당 파노라마에 포함되는 것들이 보여지고, list에도 추가된다. 그리고 가장 오른쪽은 마지막으로 클릭한 infospot을 수정할 수 있는 형태이다. 또한 panoram 안에 있는 infospot중 다른 panorama로 이동할 수 있는 버튼을 만들 예정이다.
2022-03-22 지금까지 개발한 기능
영상에서 볼 수 있듯이 tag 생성 기능, tag 수정 기능, tag list에서 클릭시 focus기능등을 구현한 상태이다. 이제 panoram들을 추가할 수 있는 기능과 map간의 이동등을 추가로 개발할 예정이다.
