关于前端: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文件运行

上传全景图片

成果演示