关于前端:360°×180°全景效果图的实现

市面上常常会看到一些VR看房，看车的软件，这种成果个别都是采纳全景技术，减少用户沉迷式的体验。

明天就通过前端技术来实现全景图的成果。这里次要应用photo-sphere-viewer.js，是一款基于three.js和uEvent 2的全景插件

photo-sphere-viewer

地址：https://photo-sphere-viewer.js.org/

成果演示：

开始应用插件下载：

插件下载：

npm install photo-sphere-viewer

残缺代码：

<template>
    <div id="viewer"></div>
</template>

<script>
import {Viewer} from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
  data () {
    return {
      img:require('../../static/test.jpg'),
    }
  },
  mounted(){
      new Viewer({
          container:document.querySelector('#viewer'),
          panorama:this.img,
          size:{
              width: '100vw',
              height: '80vh',
          },
      });
  }
}
</script>

留神：图片自行替换成筹备好的全景图。如果没有素材图可应用官网的素材图片：
https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg

运行成果：

图片来源于网络参考图

以上只是 photo-sphere-viewer 插件的简略应用，还有丰盛的标记markers插件的联合应用，更多功能可查看官网地址，联合本人的开发场景进行配置

另外一种开箱即用

下载地址：

https://gitee.com/jianshenggit/Photo-Sphere-Viewer

间接点击下载到本地

双击test.html文件运行

上传全景图片

成果演示