Package Exports
- @mecenas/pan360-viewer
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mecenas/pan360-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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)
allowrotation: boolean; - panorama rotation (optional, true by default)
rotation: boolean; - enables panorama rotation at the start (optional, default false)
speed: number; - panorama rotation speed (optional, -100 .. 100 default 10)
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)
}
Marker object:
HotSpot {
tilt:number; - angle -90 .. 90
pan:number; - angle 0 .. 360
name:string;
text:string;
}
Methods:
show(image:string):Promise<boolean>;
getScreenShot():string; - screen shot base64 image
toggleHmd(); - switch HMD mode
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
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,
rotation: true,
allowrotation: true,
hotspots: hotspotsarray
}
let panView = new Pan360View(conf);
panView.show(img).then((success)=>{
// do something
})