pannellum js

js, css cdn load

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">

<!-- jqeury load -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

css

<style>
	#panorama { width: 650px; height: 400px; }
	ul{ left : 0; list-style:none; }
	ul li{ float:left;padding:0 17px 0 0; }
</style>

html

<div id="panorama"></div>

 

js

<script>
	$(document).ready(function() {
	   /*
		*	Pannellum Option Reference
		*	https://pannellum.org/documentation/reference/ 
		*/
		pannellum.viewer('panorama',{
			"type": "equirectangular",
			"panorama": "./images/pannellumImage1.jpg",	
			"autoRotate": -3,
			"autoLoad": true,
			"compass":false,
			"hfov":120,
			"autoRotateInactivityDelay": -3
		});
	});
</script>

js option 

 - 위 내용 중 pannellum.viewer('panorama',{ 에서 panorama는 div 태그의 id 값이다.

 - type : equirectangular, cubemap, multires 3가지가 있으며, 디폴트는 equirectangular

 - panorama : 이미지 경로. 

 - autoRotate :

      . 플러스(+) : 반시계방향, 

      . 마이너스(-) : 시계방향

      . 숫자가 클수록 회전속도가 빨라진다.

 - compass : true (나침반 표시), false (나침반 미표시)

 - hfov : 파노라마의 시작 수평 시야를 도 단위로 설정

 - autoRotateInactivityDelay : 사용자 활동이 중지된 후 자동으로 파노라마 회전을 시작하도록 지연을 밀리초 단위로 설정합니다. 이 매개 autoRotate변수는 매개변수가 설정된 경우에만 효과 가 있습니다. 회전을 시작하기 전에 뷰어는 초기 피치로 이동 

 

위 내용을 그대로 배포 한 결과 

https://pannellum.netlify.app/

Pannellum TEST

 

 

 

https://github.com/mpetroff/pannellum  

GitHub - mpetroff/pannellum: Pannellum is a lightweight, free, and open source panorama viewer for the web.

https://pannellum.org/download/ 

Downloads | Pannellum

 

.