pan360-viewer
The package allows you to view panoramas in both HMD and normal modes with the possibility of applying clickable markers. configuration:
Pan360Options {
id: string; - HTML element identifier in which the panorama will be displayed (required)
width: number; - HTML element width (required)
height: number; - height of HTML element (required)
Zoom: number; - camera zoom (optional, 20 .. 130 by default 70)
firstview: number; - initial rotation of the panorama by a given angle (optional, 0 .. 360 by default 0)
component: HTMLElement; - HTML element in which the panorama will be displayed (optional)
marker: string; - marker image (optional default '/assets/hotspot.png' not included)
hotspots: HotSpot []; - array of clickable markers on the panorama (optional)
mode: number; - If it is 0 then both the reaction to device orientation and manual image dragging are enabled (after releasing the image returns to the device orientation). If 1 then you can switch between manual dragging and device orientation (optional, 0,1 by default 0)
}
Marker object:
HotSpot {
tilt:number; - angle -90 .. 90
pan:number; - angle 0 .. 360
size:number; name:string; text:string; }`
Methods:
show(image:string):Promise<boolean>;
getScreenShot():string; - screen shot base64 image
toggleHmd(); - switch HMD mode
toggleManual(); - if mode 1 switch between manual drag and device orientation
setHotspotsFunction((hotspotname)=>{ ... }); - set click markers funcrion
destroy(); - destroy renderer and events
setSize(width:number,height:number); - set HTML element dimension
Property:
hmd:boolean - get hmd mode read-only
manual:boolean - get manual mode read-only
Example:
on your html page:
<div id="panorama-360-viewer"></div>
in js code:
let conf:Pan360Options = {
id: "panorama-360",
height: window.innerHeight,
width: window.innerWidth,
zoom: 100,
hotspots: hotspotsarray
}
let panView = new Pan360View(conf);
panView.show(img).then((success)=>{
// do something
})