PSV Autorotate Keypoints Demo

by mistic100

HTML

<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css">
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/autorotate-keypoints.js"></script>
<div id="photosphere"></div>

CSS

html, body, #photosphere {
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var viewer = new PhotoSphereViewer.Viewer({
  panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
  container: 'photosphere',
  loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  defaultLat: 0.3,
  autorotateDelay: 1000,
  autorotateSpeed: '3rpm',
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,

  navbar: [
    'autorotate',
    'zoom',
    {
      // a custom button to change keypoints
      title: 'Change points',
      content: '🔄',
      onClick: randomPoints,
    },
    'caption',
    'fullscreen',
  ],

  plugins: [
    PhotoSphereViewer.AutorotateKeypointsPlugin,
    PhotoSphereViewer.MarkersPlugin,
  ],
});

var autorotatePlugin = viewer.getPlugin(PhotoSphereViewer.AutorotateKeypointsPlugin);
var markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

viewer.once('ready', randomPoints);

/**
 * Randomize the keypoints and add corresponding markers
 */
function randomPoints() {
  var points = [];

  for (var i = 0, l = Math.random() * 2 + 4; i < l; i++) {
    points.push({
      position: {
        longitude: (i + Math.random()) * 2 * Math.PI / l,
        latitude: Math.random() * Math.PI / 3 - Math.PI / 6,
      },
      pause: i % 3 === 0 ? 2000 : 0,
      tooltip: 'Test tooltip',
    });
  }

  markersPlugin.setMarkers(points.map(function(pt, i) {
    return {
      id: '#' + i,
      latitude: pt.position.latitude,
      longitude: pt.position.longitude,
      image: 'https://photo-sphere-viewer.js.org/assets/pin-red.png',
      width: 32,
      height: 32,
      anchor: 'bottom center',
    };
  }));

  autorotatePlugin.setKeypoints(points);
}