Vue 实现全景图展示

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;
}