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

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

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

inline ad

아래 사이트에서 사용방법이 나와 있는데 간략하게 소개하고자 합니다.
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/

RECENT POSTS

[javascript]객체의 키 중에서 숫자 타입의 값을 필터링하고 합산

다음은 주어진 객체의 키 중에서 숫자 타입의 값을 필터링하고 합산하는 예제입니다. const sumNumberValues = (obj) => { return Object.values(obj) ...

당뇨병: 원인, 증상, 진단 및 검사, 치료방법, 예방방법, 식이요법

당뇨병은 인슐린의 분비 혹은 작용에 이상이 생겨 혈당이 지속적으로 높아지는 만성 질환입니다. 인슐린은 췌장에서 분비되는 호르몬으로, 혈액 속의 포도당을 세포로 운반하여 에너지원으로 사용하게 합니다....

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...