版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/80528115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/view.min.css">
<script src="../libs/zepto_1.1.3.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#photosphere {
width: 100%;
height: 100%;
}
.psv-button.custom-button {
font-size: 22px;
line-height: 20px;
}
.psv-loader {
overflow: hidden;
-webkit-border-radius: 170px;
-moz-border-radius: 170px;
border-radius: 170px;
}
.psv-loader canvas {
display: none;
}
.psv-loader img {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 400px!important;
width: 400px;
max-height: 290px!important;
height: 290px!important;
-webkit-border-radius: 200px!important;
-moz-border-radius: 200px!important;
border-radius: 200px!important;
}
.playBtn {
position: fixed;
right: 10px;
top: 10px;
width: 34px;
height: 34px;
background: url(../img/pause.png);
background-size: 100% 100%;
z-index: 999999999;
display: none;
}
.pause {
background: url(../img/play.png);
background-size: 100% 100%;
}
</style>
<style>
.scene {
width: 100%;
height: 100%;
-webkit-perspective: 600;
perspective: 600;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
top: 0;
background: url(../img/timg.jpg);
background-size: 100% 100%;
}
.scene svg {
width: 240px;
height: 240px;
}
.dc-logo {
position: fixed;
right: 10px;
bottom: 10px;
}
.dc-logo:hover svg {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.dc-logo:hover:hover:before {
content: '\2764';
padding: 6px;
font: 10px/1 Monaco, sans-serif;
font-size: 10px;
color: #00fffe;
text-transform: uppercase;
position: absolute;
left: -70px;
top: -30px;
white-space: nowrap;
z-index: 20px;
box-shadow: 0px 0px 4px #222;
background: rgba(0, 0, 0, 0.4);
}
.dc-logo:hover:hover:after {
content: 'Digital Craft';
padding: 6px;
font: 10px/1 Monaco, sans-serif;
font-size: 10px;
color: #6E6F71;
text-transform: uppercase;
position: absolute;
right: 0;
top: -30px;
white-space: nowrap;
z-index: 20px;
box-shadow: 0px 0px 4px #222;
background: rgba(0, 0, 0, 0.4);
background-image: none;
}
@-webkit-keyframes arrow-spin {
50% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes arrow-spin {
50% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="playBtn"></div>
<audio src="../libs/source.mp3" id="audios" style="position: absolute;left: 99999999999999px;top: 999999999px;" loop="true"></audio>
<div id="photosphere"></div>
<div style="position: fixed;z-index: 99999999;top: 10px;left: 10px;display: none;color: greenyellow;" class="back">返回</div>
<script src="../libs/three.js"></script>
<script src="../libs/D.min.js"></script>
<script src="../libs/uEvent.js"></script>
<script src="../libs/doT.js"></script>
<script src="../libs/CanvasRenderer.js"></script>
<script src="../libs/Projector.js"></script>
<script src="../libs/DeviceOrientationControls.js"></script>
<script src="../libs/view.min.js"></script>
<div class="scene">
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width: "38"="" height: "38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="#99cc33">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
C34.797,11.841,28.159,5.203,20,5.203z">
</path>
<path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
</path>
<path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z" transform="rotate(7.50829 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z" transform="rotate(276.329 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<script>
$(function(){
var panos = [{
url: '../img/1.jpg',
desc: '全景主页',
target: {
longitude: 3.848,
latitude: -0.244
}
}, {
url: '../img/2.jpg',
desc: '全景详情',
target: {
longitude: 0,
latitude: 0
}
}];
var isCahe = true;
var PSV = new PhotoSphereViewer({
container: 'photosphere',
panorama: panos[0].url,
caption: panos[0].desc,
time_anim: false,
default_long: Math.PI / 2,
loading_img: '',
loading_txt: '',
cache_texture:10,
navbar: [
'autorotate', 'zoom', 'markers',
'spacer-1',
'caption', 'gyroscope', 'fullscreen'
],
markers: (function() {
return common();
}())
});
PSV.on('ready',function(){
PSV.toggleAutorotate();
$('#audios')[0].play();
$('.scene').hide();
$('.playBtn').show();
});
PSV.on('select-marker', function(marker) {
if(marker.data && marker.data.deletable) {
if(isCahe){
$('.scene').show();
isCahe = false;
}
PSV.clearMarkers();
PSV.setPanorama(panos[1].url, panos[1].target, true)
.then(function() {
$('.back').show();
$('.scene').hide();
PSV.setCaption(panos[1].desc);
});
}
});
$('.back').click(function() {
$(this).hide();
var len = common().length;
PSV.setPanorama(panos[0].url, panos[0].target, true)
.then(function() {
for(var k = 0; k < len; k++) {
PSV.addMarker(common()[k]);
}
PSV.setCaption(panos[0].desc);
});
});
$('.playBtn').click(function() {
if($(this).hasClass('pause')) {
$(this).removeClass('pause')
$('#audios')[0].play()
} else {
$(this).addClass('pause')
$('#audios')[0].pause()
}
});
function common() {
var a = [];
for(var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
for(var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
a.push({
id: '#' + a.length,
tooltip: '点我啊',
latitude: j,
longitude: i,
image: '../img/pin2.png',
width: 32,
height: 32,
anchor: 'bottom center',
data: {
deletable: true
}
});
}
}
a.push({
id: 'text',
longitude: -0.5,
latitude: -0.28,
html: '♥来啊♥',
anchor: 'bottom right',
style: {
maxWidth: '320px',
color: 'red',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: 'An HTML marker',
position: 'right'
}
});
a.push({
id: 'circle',
tooltip: 'A circle of radius 30',
circle: 20,
svgStyle: {
fill: 'rgba(255,255,0,0.3)',
stroke: 'yellow',
strokeWidth: '2px'
},
// longitude: 0.14842681258549928,
// latitude: -0.8678522571819425,
x: 8395,
y: 6827,
anchor: 'center right'
});
return a
}
function transToThreeCoord(x, y) {
let mouse = new THREE.Vector3();
mouse.x = (x / 14620) * 2 - 1;
mouse.y = -(y / 7310) * 2 + 1;
return mouse;
}
})
</script>
</body>
</html>
做个更新，增加图片的缓存
源码下载https://download.csdn.net/download/susuzhe123/10450711