  <script src="//code.jquery.com/jquery-3.2.1.slim.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
  <script type="text/javascript" src="//cdn.rawgit.com/knee-cola/SphereViewer/13f4e3aa/dist/sphereViewer.min.js"></script>

If you want to store files localy on yout server, you can download the minified file from GitHub repository.

Dependencies

SphereViewer was build with:

Three.js v84
jQuery

Usage example

// defining spinner config
var config = {
  // (if set) the logo will be displayed at the bottom
  // of the sphere, which is usefull for hiding the triopod
  logo:'img/logo.png',
  // (if set) the usage hint is displayed in the center of the screen
  // and is hidden after the user clicks/taps the screen
  hint: isMobile ? 'img/sphere-icon-mobile.png' : 'img/sphere-icon-desktop.png',
  
  // overriding the default control config
  control: {
    autoRotate: true
  },
  
  // overidding the default spinner config
  spinner: {
    groupRadius: 20
  },

  // Here we could override the default THREE.js UV mapping, by providing a mapper function
  // uvMapper: (geometry) => { ... doing some custom UV mapping ...  }
};

var picUrls = ['img/sphere/preloader.jpg', 'img/sphere/hd.jpg']

// creating a new instance of the viewer
// ... the viewer will automaticall be appended to <body> and displayed
var viewer = new SphereViewer.Viewer(picUrls, controlConfig);

// adding event handlers:
viewer.addEventListener('close', function() { console.log('sphere closed'); });

License

SphereViewer is licensed under the MIT License.

Keywords

photosphere

FAQs

What is sphere-viewer?

Is sphere-viewer popular?

Is sphere-viewer well maintained?

Package last updated on 07 Apr 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install