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

Category: Image , Javascript , Recommended | July 11, 2018
Author: JeremyHeleine
Views Total: 5,383
Official Page: Go to website
Last Update: July 11, 2018
License: MIT

Preview:

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

Description:

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

3 thoughts on “360×180 Degrees Panorama Viewer with Three.js – Photo Sphere Viewer

  1. ala

    thanks , its great viewer,

    one problem i faced when i tried it with a local panorama e.g: ‘sun.jpg’ it doesnt load the image, it keeps saying … loading, any idea

    Reply
  2. andfinally

    Great plugin, thanks! When trying this locally you also need the styles

    html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }

    #container {
    width: 100%;
    height: 100%;
    }

    in the header of your page. I find the basic example crashes Safari on my iPhone 4, but it works nicely on iOS 7.

    Reply
  3. meetshah

    Hi there, this is an amazing demo. I am almost there. I want to show gallery of such images so I need to have multiple 360 images on a page, I am trying to do that but only 1st image populates.

    I am creating object of the 2nd image as well and have added css also but still I am getting just the 1st one. Please help me in this.

    Reply

Leave a Reply