웹페이지에서 360 VR 이미지 추가방법(feat.pannellum)

By
markettraders
-
0
9114

pannellumm 은 웹에서 360 VR 이미지를 확인할 수 있는 무료 오픈소스 파노라마 뷰어 입니다. html, css, javascipt, webgl 를 사용하여 구축되었습니다.

아래 사이트에서 사용방법이 나와 있는데 간략하게 소개하고자 합니다.
https://pannellum.org/
https://pannellum.org/documentation/examples/simple-example/

CDN 으로도 제공되며 다운로드 하여 js, css 파일을 임포트 하여 사용할 수도 있습니다.
혹은 라이브러리를 임포트 하지 않고 iframe 만으로도 360 VR 이미지를 추가하여 사용할 수도 있습니다.

iframe 추가방법

제일 간편한 방법은 iframe 을 사용하는 방법입니다. 아래 코드를 추가만 해주면 웹에서 확인이 가능합니다. src 에 이미지 링크만 변경해주면 됩니다.

<iframe width="100%" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://pannellum.org/images/alma.jpg"></iframe>

결과

아래는 iframe 으로 추가한 360 VR 이미지 결과 입니다.

CDN 추가 방법

cdn 으로 css파일과 js 파일을 임포트 시켜주시고 아래 panorama의 이미지 경로만 변경해주시면 됩니다. 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});
</script>

</body>
</html>

아래 document 페이지를 확인하시면 더 다양한 옵션으로 360 VR 뷰어를 제어 할 수 있습니다. auto load, auto rotate 등 다양한 추가 옵션을 사용할 수 있으니 한번 확인해보세요.

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