360도 VR을 손쉽게 만드는 Reel
처음으로 소개할 jQuery 플러그인은 360도 VR (Virtual Reality)을 쉽게 만들 수 있는 Reel입니다.
Reel에 대한 간략한 정보는 아래와 같습니다.
- 제작자 / 제작사 : Petr Vostřel
- 홈페이지 : http://reel360.org/reel
- Repository : https://github.com/pisi/Reel
- 요구하는 jQuery 버전 : 1.5 이상
- 브라우저 호환성 : IE 6 이상 / Chrome / Opera 9 이상 / Firefox 3 이상 / Safari 3 이상
- 한글화 여부 : 필요 없음
- 타 플러그인 의존성 : 기본적으로는 없으나, 마우스 휠을 이용한 회전은 별도 플러그인 필요 (* 해당 플러그인 번들판 제공하고 있음)
- 가격 : 무료
- 라이센스 : MIT 라이센스 (개인 및 상업적 용도 모두 해당)
다음 로드뷰나 네이버의 거리뷰 같은 경우에는 많은 데이터를 처리해야 하기 때문에 플래시로 구현되어 있습니다만 (참고로 Google 스트리트 뷰는 플래시로 되어 있지 않습니다.), 간단한 상품이나 풍경 파노라마와 같은 것을 제작하는 데에는 이 플러그인이 유용합니다. 또한 간단한 파노라마 정도를 만드는 데 특별히 많은 코딩이 필요 없는 것이 장점입니다.
VR을 만들기 위해서는 파노라마 또는 스프라이트로 구성된 이미지가 필요합니다. 이거는 각자 알아서 (...) 준비하셔야 하는데 저는 딱히 준비한 것이 없으니 일단 Reel 공식 홈페이지에 올라와 있는 예제 이미지를 다운로드 받았습니다. 예제 이미지와 공식 홈페이지에 있는 예제 코드를 가지고 간단하게 설명을 하도록 하겠습니다.
다음은 Reel을 이용한 간단한 파노라마 예제 코드입니다.
- 코드 설명 -
1. 위 코드에서 img 태그의 src (파일 경로)는 파노라마 회전하기 전 보여줄 기본 이미지입니다.
여기서는 outlook.jpg가 지정되어 있습니다.
2. img 태그의 class로는 reel을 지정해 주셔야 플러그인에서 인식하여 동작합니다.
3. data-image 속성에는 파노라마 사진 파일을 지정합니다. 여기서는 outlook-reel.jpg가 지정되어 있습니다.
4. data-stitched 속성에는 파노라마 사진 전체 너비를 입력합니다. 여기서는 1652 (픽셀)이 지정되어 있습니다.
5. data-orientable 속성은 스마트폰 등의 기기에 내장된 자이로스코프를 이용해 파노라마를 회전할 수 있게 할 지의
여부를 결정하는 속성입니다. 여기서는 true로 지정되어 있습니다.
이렇게 해서 간단하게 360도 회전이 가능한 파노라마를 만들어 보았습니다.
기타 여기서 소개하지 않은 자세한 옵션이나 예제는 다음 링크를 참고하시기 바랍니다.