Vue 实现全景图展示
Vue 实现全景图展示全景图需要用鱼眼相机拍(720度),手机拍出来的会有折痕下载依赖npm install three --savenpm install photo-sphere-viewer --savehtml<div class="glodel"><div :id="div"></div><div class="noImg...
·
Vue 实现全景图展示
全景图需要用鱼眼相机拍(720度),手机拍出来的会有折痕
下载依赖
npm install three --save
npm install photo-sphere-viewer --save
html
<div class="glodel">
<div :id="div"></div>
<div class="noImg" v-if="imgShow">
<img src="../assets/img/zxc/noImg.png" alt="">
<div>暂无全景图,请联系工作人员上传全景图</div>
</div>
二、在data里定义
//全景图配置
div:'panorama',
imgShow:false,
四、全景图展示
show(){
if(this.vrImg!="false"){
if(this.vrImg.indexOf('http')!=-1){
this.vrImg=this.vrImg.replace('http','https');
console.log("替换后",this.vrImg)
}
window.addEventListener('load',this.fun())
this.imgShow=false;
}else{
this.imgShow=true;
}
},
fun(){
let p;
p=PhotoSphereViewer({
container: this.div,
panorama: this.vrImg,
navbar:false,
zoom_level:100,
time_anim:false,
zoomRangeWidth:100,
default_fov:179,
fisheye:true,
loading_msg:"加载中",
size: {
width: '100%',
height: '100%'
}
});
},
VRimg是我用来判断接口里有没有图片的
css参考就好
.noImg{
position: absolute;
top: 0.44rem;
left: 0;
text-align: center;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column;
background-color: #fff;
z-index: 2;
}
.noImg img{
width: 100px;
margin: 0 auto;
display: block;
}
.noImg div{
font-size: .14rem;
margin-top: 10px;
}
更多推荐
已为社区贡献1条内容
所有评论(0)