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

總結

以上是生活随笔為你收集整理的Vue 实现全景图展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。