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

[vscode]이 시스템에서 스크립트를 실행할 수 없으므로 nest.ps1 파일을 로드할 수 없습니다.

nest : 이 시스템에서 스크립트를 실행할 수 없으므로 C:UsersmarkettradersAppDataRoamingnpmnest.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1 이 오류는 PowerShell 실행 정책 관련...

[nest.js]nest.js, node.js, 프로젝트 생성 방법

Node.js 설치 Node.js의 공식 웹사이트(nodejs.org)에서 Windows용 인스톨러를 다운로드합니다. 다운로드한 인스톨러를 실행하여 설치합니다. Node Version Manager(NVM)을 사용하는 경우 nvm install node # 최신 버전 설치 nvm install 14 #...

[광주]위파크 더 센트럴 분양주택 분양안내

기본정보 공급위치: 광주광역시 서구 풍암동 10-12번지 일원 공급번호: 2023000351 공급규모: 625세대 분양/입주: 분양 2023-08-04 / 입주 2026-08 건설사: (주)호반건설 (주)라인건설 분양문의: 1670-5676 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.wepark-central.co.kr/ 모집공고문 보기 청약일정 모집공고일: 2023-08-04 청약접수: 2023-08-14...

[강원]힐스테이트 속초 분양주택 분양안내

기본정보 공급위치: 강원특별자치도 속초시 금호동 622-40 일원 공급번호: 2023000337 공급규모: 925세대 분양/입주: 분양 2023-07-21 / 입주 2026-05 건설사: 현대엔지니어링(주) 분양문의: 033-947-0925 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.hillstate-sokcho.co.kr 모집공고문 보기 청약일정 모집공고일: 2023-07-21 청약접수: 2023-07-31 ~...