360×180 Degrees Panorama Viewer with Three.js – Photo Sphere Viewer

Photo Sphere Viewer is a pure JavaScript library used to embed interactive panorama pictures on your web project using three.js.

Basic usage:

Load the needed three.js and the Photo Sphere Viewer javascript library in the document.

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

Create a container for the panorama viewer.

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

Create a new PhotoSphereViewer object and pass in the parameters to the panorama viewer.

var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
    panorama: 'sun.jpg',
    container: div,
    time_anim: 3000,
    navbar: true,
    navbar_style: {
      backgroundColor: 'rgba(58, 67, 77, 0.7)'
    }
});

All the default parameters to customize the panorama viewer.

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

Changelog:

v2.9 (07/11/2018)

• Update