photo-sphere-viewer.js是一个用于显示照片球面全景图的JavaScript库，是一个基于three.js的全景插件。
示例
/taskdata/photo-sphere-viewer/index.html
效果
特点
1、能添加锚点
2、可以调用陀螺仪
3、可以加载单张和六张的全景图
4、功能丰富，使用简单
调用陀螺仪需要 引用 DeviceOrientationControls.js 这是three.js的 一个js插件
需要依赖的文件
three.jsdoT.jsuEvent.jsD.js
使用步骤
引入下面文件
<link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script>
创建一个div
<!-- 全景图 --><div id="photo-sphere"><div id="viewer"></div></div>
调用PhotoSphereViewer方法
<script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'path/to/panorama.jpg',size:{width:'100%',height:'100%'}});</script>
写下面这些代码就可以加载全景图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;padding: 0;}#photo-sphere {width: 80%;height: 500px;margin: 100px auto;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);}</style><link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script></head><body><!-- 全景图 --><div id="photo-sphere"><div id="viewer"></div></div><script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'images/Bryce-Canyon.jpg',size:{width:'100%',height:'100%'}});</script></body></html>
具体功能可以查看官方文档：
https://photo-sphere-/api/
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen"><title>Title</title><style>body {margin: 0;padding: 0;}#photo-sphere {width: 100%;height: 500px;margin: 0 auto;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);}</style><link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script></head><body><!-- 全景图 --><div id="photo-sphere"><div id="viewer"></div></div><script>var config = [{url:{left: 'images/siximg/left.jpg',front: 'images/siximg/front.jpg',right: 'images/siximg/right.jpg',back: 'images/siximg/back.jpg',top: 'images/siximg/top.jpg',bottom: 'images/siximg/bottom.jpg',},desc:'太阳神庙 ( 虚幻 4 )'}];var PSV = PhotoSphereViewer({container:'viewer', // 直接写 id 值// panorama:'images/Bryce-Canyon.jpg',panorama:config[0].url,caption:config[0].desc,default_long: Math.PI / 2,default_fov: 90,size:{width:'100%',height:isMobile()? screen.availHeight : '100%',},loading_msg:'images/photosphere-logo.gif',time_anim:false,markers:[{id:'image',image:'images/pin2.png',width:35,height:35,longitude: 100,latitude: 0,anchor:'bottom center',tooltip:'雕像',},{id:'image2',image:'images/pin1.png',width:35,height:35,longitude: 20,latitude: -0.15,anchor:'bottom center',tooltip:'灯',}]});/* 判断设备是否为移动端 */function isMobile() {var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;return isMobile;}if (!isMobile()) {document.getElementById('photo-sphere').style.marginTop = '100px';document.getElementById('photo-sphere').style.marginBottom = '100px';document.getElementById('photo-sphere').style.marginLeft = 'auto';document.getElementById('photo-sphere').style.marginRight = 'auto';document.getElementById('photo-sphere').style.width = '80%';}</script></body></html>
