[Javascript] Pannellum.js 시작하기(feat. hotspots)

Pannellum.js는 360도 이미지 및 가상 투어를 만들기 위한 JavaScript 기반 라이브러리입니다.

 

결과물 샘플 

https://pannellum.netlify.app/

Pannellum TEST

import

<!-- 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>

예제(기본)

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

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

<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>

 

예제 데이터 (핫스팟)

hotSpots는 Pannellum.js를 사용하여 360도 이미지 위에 배치된 상호 작용 가능한 지점입니다.

hotSpot 객체는 Pannellum.js에서 사용되는 JSON 형식으로 표현됩니다.

 const data = [
  {
    "id": "scene_id_1",
    "title": "room-1",
    "type": "equirectangular",
    "panorama": "/img/img1.jpg",
    "hotSpots": [
      {
        "id": "hotSpot1",
        "pitch": 10,
        "yaw": 20,
        "type": "scene",
        "cssClass": "scene-hotspot",
        "sceneId": "scene_id_2",
        "text": "Go to room 2"
      }
    ]
  },
  {
    "id": "scene_id_2",
    "title": "room-2",
    "type": "equirectangular",
    "panorama": "/img/img2.jpg",
    "hotSpots": [
      {
        "id": "hotSpot2",
        "pitch": 10,
        "yaw": 20,
        "type": "scene",
        "cssClass": "scene-hotspot",
        "sceneId": "scene_id_2",
        "text": "Go to room 1"
      }
    ]
  },
  {
    "id": "scene_id_3",
    "title": "room-3",
    "type": "equirectangular",
    "panorama": "/img/img3.jpg",
    "hotSpots": [
      {
        "id": "hotSpot3",
        "pitch": 10,
        "yaw": 20,
        "type": "scene",
        "cssClass": "scene-hotspot",
        "sceneId": "scene_id_3",
        "text": "Go to room 3"
      }
    ]
  },
  {
    "id": "scene_id_4",
    "title": "room-4",
    "type": "equirectangular",
    "panorama": "/img/img4.jpg",
    "hotSpots": [
      {
        "id": "hotSpot4",
        "pitch": 10,
        "yaw": 20,
        "type": "scene",
        "cssClass": "scene-hotspot",
        "sceneId": "scene_id_4",
        "text": "Go to room 4"
      }
    ]
  }
]

예제 데이터 (핫스팟 적용)

const config = {
        default: {
            firstScene: firstSceneId, //첫번째 표출할 아이디.
            sceneFadeDuration: 1000,
            autoLoad: true,
            showFullscreenCtrl: false,
            keyboardZoom: false,
            compass: false,
        },
        scenes: data, //예제 데이터
    };
pannellum.viewer(document.getElementsByClassName('#pano'), config);

 핫스팟 위치 변경

var panorama = pannellum.viewer('panorama', {
  "type": "equirectangular",
  "panorama": "image.jpg",
  "hotSpots": [
    {
      "pitch": 10, // 현재 위치 (예: 위 아래 기울기)
      "yaw": 20, // 현재 위치 (예: 좌우 회전)
      "type": "info",
      "text": "This is a hot spot!"
    }
  ]
});

// hotSpot 위치 변경
panorama.getScene().hotSpots[0].pitch = 30; // 위 아래 기울기 변경
panorama.getScene().hotSpots[0].yaw = 50; // 좌우 회전 변경

위 코드에서는 hotSpots 배열에 하나의 hotSpot 객체를 정의하고, 해당 hotSpot의 위치를 pitch와 yaw 속성을 사용하여 지정합니다. 그런 다음, panorama.getScene().hotSpots를 통해 해당 hotSpot 객체에 접근하여 위치를 변경할 수 있습니다.

위의 코드는 단일 hotSpot을 다루는 예제입니다. 여러 개의 hotSpot이 있는 경우 배열의 인덱스를 변경하여 각 hotSpot의 위치를 수정할 수 있습니다.

https://mitw.tistory.com/36

pannellum js

https://chat.openai.com/