Photo-Sphere-Viewer简单使用
庄瀚玥
官方网站：https://photo-sphere-viewer.js.org/guide/
文件链接：https://download.csdn.net/download/weixin_37365539/13053909
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>360全景图展示</title>
<link rel="stylesheet" href="./util/photoSpheredView/photo-sphere-viewer.min.css"/>
<script src="./util/photoSpheredView/three.min.js"></script>
<script src="./util/photoSpheredView/browser.min.js"></script>
<script src="./util/photoSpheredView/photo-sphere-viewer.min.js"></script>
</head>
<body>
<style>
body {
font-size: 16px;
background-color: #E6E7EB;
margin: 0;
}
#your-pano {
position: relative;
margin: 0 auto;
}
.container{
width: 600px;
height: 400px;
margin: 100px auto;
}
</style>
<div class="container">
<div id="your-pano"></div>
</div>
<script>
var div = document.getElementById('your-pano');
var viewer = new PhotoSphereViewer.Viewer({
container: div,
panorama: './util/photoSpheredView/spheredView.jpg',
size: {
width: '100%',
height: '100%'
}
});
</script>
</body>
</html>
类似资料：