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

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...