vue与单页面 使用Photo Sphere Viewer创建vr 360全景示例代码

图片资料来源于：http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html  因本人注册账号下载参考之后再到vue项目中，若有侵权请邮件：903832827@qq.com,我将马上更正，谢谢，大神。。。

示例效果图

 

前提：我本打算直接引用静态js，然后直接运行，后来一想，还是自己去npm，按照自己的理解去完成一遍，所以以下是我自己理解一点点之后，直接到vue中的记录，当然，这是我本地开发环境调试，打包之后是否有问题还没测试。

1、Photo Sphere Viewer基于 three.js,因此先安装依赖

     地址：https://www.npmjs.com/package/three   或 npm i three --save-dev

2、安装依赖Photo Sphere Viewer

    下载地址：https://photo-sphere-viewer.js.org/   或  npm install photo-sphere-viewer@3.5.1 --save-dev

 

我的vue目录结构截图

以下分别展示对应的编码文件内容：

1、index.vue

  <template>
    <div class="PSViewer" ref="psvdbg"></div>
  </template>

  <script type="text/javascript" charset="utf-8" src="./script.js"></script>

  <style lang="scss">@import "./style.scss";</style>

 

2、script.js

var THREE   = require('three');
var PhotoSphereViewer   = require('photo-sphere-viewer');

export default {
    name: "PSViewer",

    data() {
        return {
            width:798,
            height:498,
            img:require('./images/sun.jpg'),
        };
    },

    beforeDestory(){},

    mounted(){
        this.init();
    },

    methods: {
        // photo-sphere-viewer
        init:function(){
            const self   = this;

            var PSV = new PhotoSphereViewer({