360°×180°全景效果图的实现

市面上经常会看到一些VR看房，看车的软件，这种效果一般都是采用全景技术，增加用户沉浸式的体验。

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

photo-sphere-viewer

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

效果演示：

gif动图

开始使用插件下载：

插件下载：

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

运行效果：

图片来源于网络参考图