基于Three.js的全景---photo-sphere-viewer

以前公司其他几个前端做全景都是用软件生成，由于本人比较懒，不想去折腾那个软件，于是乎就有了下面的事......

这个是基于three.js的全景插件  photo-sphere-viewer.js 

————————————————————————————————————————

1、能添加热点；

2、能调用陀螺仪；

3、功能比较完善，能满足大多数人的需求了；

4、最主要的是操作简单，提供一长全景图片即可（大多数手机都可以拍摄）。

直接上代码：

var photosphere = document.getElementById('photosphere');
 var PSV = new PhotoSphereViewer({
  // 全景图片路径
//  panorama: 'Bryce-Canyon-National-Park-Mark-Doliner.jpg',
  panorama: 'sun.jpg',
  // 容器
  container: photosphere,
  //标题
  caption:"",
  // 关闭动画
  time_anim: false,
  //鱼眼镜头
  fisheye:true,
  // 显示导航栏
//  navbar: true,
//  自定义导航的顺序
  navbar:  [
   'autorotate',
   'zoom',
   'gyroscope',
   'markers',
   'caption',
   'fullscreen'
  ],
  //按钮提示
  lang: {
   autorotate: 'Automatic rotation',
   zoom: 'Zoom',
   zoomOut: 'Zoom out',
   zoomIn: 'Zoom in',
   download: 'Download',
   fullscreen: 'Fullscreen',
   markers: 'Markers',
   gyroscope: 'Gyroscope'
  },
  // 设置画布大小
  size: {
    '100%',
//   height: '323px'
   height: '603px'
  },
//  启用陀螺仪
  gyroscope:true,
//  准备就绪就执行
//  onready:Ready,
  // 标记列表
  markers: [{
   // 当单击时打开面板的图像标记
   id: 'image',
   longitude: 5.69810,
   latitude: -0.13770,
   image: 'http://photo-sphere-viewer.js.org/assets/pin-blue.png',
    32,
   height: 32,
   anchor: 'bottom center',
   tooltip: 'A image marker. <b>Click me!</b>',
   content: document.getElementById('lorem-content').innerHTML
  },
   {
    // 具有自定义样式的html标记
    id: 'text',
    longitude: 0,
    latitude: 0,
    html: 'HTML <a href="javascript:;" onclick="top.hello();">markerd</a> ♥',
    anchor: 'bottom right',
    style: {
     maxWidth: '100px',
     color: 'white',
     fontSize: '20px',
     fontFamily: 'Helvetica, sans-serif',
     textAlign: 'center'
    },
    tooltip: {
     content: 'An HTML marker',
     position: 'right'
    }
   },
   {
    // 圆圈标记
    id: 'circle',
    circle: 20,
    x: 2500,
    y: 1000,
    tooltip: 'A circle marker'
   },
   {
    // 圆圈标记
    id: 'circle2',
    circle: 30,
    x: 2000,
    y: 1200,
    tooltip: 'A circle marker'
   }
  ]
 });

注：调用陀螺仪需要 引用 DeviceOrientationControls.js；

最后附上 photo-sphere-viewer.js API-------http://photo-sphere-viewer.js.org/