photo-sphere-viewer.js
是一个用于显示照片球面全景图的JavaScript库,是一个基于three.js
的全景插件。
示例
http://ithanmang.com/taskdata/photo-sphere-viewer/index.html
效果
特点
1、能添加锚点
2、可以调用陀螺仪
3、可以加载单张和六张的全景图
4、功能丰富,使用简单
调用陀螺仪需要 引用 DeviceOrientationControls.js 这是three.js的 一个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>
写下面这些代码就可以加载全景图
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
<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-viewer.js.org/api/
示例代码
<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>Titletitle>
<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>
<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>