360 Degrees Panorama Image Viewer With Three.js – Photo Sphere Viewer

Preview:

Description:

Photo Sphere Viewer is a JavaScript library which makes use of three.js 3D library to create a 360° 3D panorama image viewer with lots of customization options.

Basic usage:

Load the needed three.js and photo-sphere-viewer.min.js in the html page.

<script src="three.min.js"></script>
<script src="photo-sphere-viewer.min.js"></script>

Create a container element for the panorama viewer.

<div id="container"></div>

Create a new Photo Sphere Viewer and specify the image you want to present.

var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
    panorama: 'image.jpg',
    container: div
});

Customization options.

• {object} args – Settings to apply to the viewer
• {string} args.panorama – Panorama URL or path (absolute or relative)
• {HTMLElement|string} args.container – Panorama container (should be a `div` or equivalent), can be a string (the ID of the element to retrieve)
• {boolean} [args.autoload=true] – `true` to automatically load the panorama, `false` to load it later (with the {@link PhotoSphereViewer#load|`.load`} method)
• {boolean} [args.usexmpdata=true] – `true` if Photo Sphere Viewer must read XMP data, `false` if it is not necessary
• {boolean} [args.cors_anonymous=true] – `true` to disable the exchange of user credentials via cookies, `false` otherwise
• {object} [args.pano_size=null] – The panorama size, if cropped (unnecessary if XMP data can be read)
• {number} [args.pano_size.full_width=null] – The full panorama width, before crop (the image width if `null`)
• {number} [args.pano_size.full_height=null] – The full panorama height, before crop (the image height if `null`)
• {number} [args.pano_size.cropped_width=null] – The cropped panorama width (the image width if `null`)
• {number} [args.pano_size.cropped_height=null] – The cropped panorama height (the image height if `null`)
• {number} [args.pano_size.cropped_x=null] – The cropped panorama horizontal offset relative to the full width (middle if `null`)
• {number} [args.pano_size.cropped_y=null] – The cropped panorama vertical offset relative to the full height (middle if `null`)
• {object} [args.default_position] – Defines the default position (the first point seen by the user)
• {number|string} [args.default_position.long=0] – Default longitude, in radians (or in degrees if indicated, e.g. `’45deg’`)
• {number|string} [args.default_position.lat=0] – Default latitude, in radians (or in degrees if indicated, e.g. `’45deg’`)
• {number} [args.min_fov=30] – The minimal field of view, in degrees, between 1 and 179
• {number} [args.max_fov=90] – The maximal field of view, in degrees, between 1 and 179
• {boolean} [args.allow_user_interactions=true] – If set to `false`, the user won’t be able to interact with the panorama (navigation bar is then disabled)
• {boolean} [args.allow_scroll_to_zoom=true] – It set to `false`, the user won’t be able to scroll with their mouse to zoom
• {number|string} [args.tilt_up_max=π/2] – The maximal tilt up angle, in radians (or in degrees if indicated, e.g. `’30deg’`)
• {number|string} [args.tilt_down_max=π/2] – The maximal tilt down angle, in radians (or in degrees if indicated, e.g. `’30deg’`)
• {number|string} [args.min_longitude=0] – The minimal longitude to show
• {number|string} [args.max_longitude=2π] – The maximal longitude to show
• {number} [args.zoom_level=0] – The default zoom level, between 0 and 100
• {number} [args.long_offset=π/360] – The longitude to travel per pixel moved by mouse/touch
• {number} [args.lat_offset=π/180] – The latitude to travel per pixel moved by mouse/touch
• {integer} [args.time_anim=2000] – Delay before automatically animating the panorama in milliseconds, `false` to not animate
• {boolean} [args.reverse_anim=true] – `true` if horizontal animation must be reversed when min/max longitude is reached (only if the whole circle is not described)
• {string} [args.anim_speed=2rpm] – Animation speed in radians/degrees/revolutions per second/minute
• {string} [args.vertical_anim_speed=2rpm] – Vertical animation speed in radians/degrees/revolutions per second/minute
• {number|string} [args.vertical_anim_target=0] – Latitude to target during the autorotate animation, default to the equator
• {boolean} [args.navbar=false] – Display the navigation bar if set to `true`
• {object} [args.navbar_style] – Style of the navigation bar
• {string} [args.navbar_style.backgroundColor=rgba(61, 61, 61, 0.5)] – Navigation bar background color
• {string} [args.navbar_style.buttonsColor=rgba(255, 255, 255, 0.7)] – Buttons foreground color
• {string} [args.navbar_style.buttonsBackgroundColor=transparent] – Buttons background color
• {string} [args.navbar_style.activeButtonsBackgroundColor=rgba(255, 255, 255, 0.1)] – Active buttons background color
• {number} [args.navbar_style.buttonsHeight=20] – Buttons height in pixels
• {number} [args.navbar_style.autorotateThickness=1] – Autorotate icon thickness in pixels
• {number} [args.navbar_style.zoomRangeWidth=50] – Zoom range width in pixels
• {number} [args.navbar_style.zoomRangeThickness=1] – Zoom range thickness in pixels
• {number} [args.navbar_style.zoomRangeDisk=7] – Zoom range disk diameter in pixels
• {number} [args.navbar_style.fullscreenRatio=4/3] – Fullscreen icon ratio (width/height)
• {number} [args.navbar_style.fullscreenThickness=2] – Fullscreen icon thickness in pixels
• {number} [args.eyes_offset=5] – Eyes offset in VR mode
• {string} [args.loading_msg=Loading…] – Loading message
• {string} [args.loading_img=null] – Loading image URL or path (absolute or relative)
• {HTMLElement|string} [args.loading_html=null] – An HTML loader (element to append to the container or string representing the HTML)
• {object} [args.size] – Final size of the panorama container (e.g. {width: 500, height: 300})
• {(number|string)} [args.size.width] – Final width in percentage (e.g. `’50%’`) or pixels (e.g. `500` or `’500px’`) ; default to current width
• {(number|string)} [args.size.height] – Final height in percentage or pixels ; default to current height
• {PhotoSphereViewer~onReady} [args.onready] – Function called once the panorama is ready and the first image is displayed