360vr 이미지를 웹에서 표현하기

https://pannellum.org/documentation/examples/simple-example/

위 사이트를 이용해서 360도 영상을 웹에서 뿌리고 있습니다.

위와 같은 영상을 360도로 뿌려 주기도 하고, 여러 장으로 나뉘어진 사진을 합성해서 보여주기도 합니다.

저는 위와 같은 영상을 이용했습니다.

참고로 사진 촬영은 LG 360Cam을 이용했습니다.

http://r-rim.net/article/did/12

현재 만들고 있는 웹 화면입니다. (부동산 매물 광고 페이지죠)

디자인은 좀 달라질 겁니다.

만약 블로그에서 사용한다면 iframe 방식을 쓰면 될 것 같습니다.

이렇게요.

첫 줄 견본의 iframe입니다.

견본은 기능을 하나씩 보여 주지만 한꺼번에 여러 기능을 쓸 수도 있습니다.

대표적으로 자동시작과 자동회전이 있지요.

제가 만든 페이지에서는 둘 다 적용해서 페이지가 열리면 자동으로 이미지가 보이고 회전을 하지요.

모바일에서 사용하려면 이미지 크기가 4096px 이하여야 잘 작동할 겁니다.

제 전화(베시놋)에서 그렇게 오류가 뜨더라구요.

three.js를 기반으로 하여 웹에서 360vr 이미지를 쉽게 보여주도록 만들었다고 합니다.

360vr 이미지를 웹에서 보여 주는 자바스크립트를 찾다가 원리를 설명한 페이지도 찾았는데 다시 찾으려니 잘 안 보이네요.