@mecenas/pan360-viewer NPM

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