Vue 10分钟入门VR全景显示 基于photo-sphere-viewer

---

前言

由于工作的需求，要实现全景图片的展示与预览，本来以为会是一个很难的内容，没想到使用现成的组件photo-sphere-viewer就可以轻松实现，上手只需要10分钟！

---

一、引入photo-sphere-viewer？

可以直接通过npm进行引入

npm install photo-sphere-viewer

二、使用步骤

1.引入库

photo-sphere-viewer 都是采用按需引入，用到哪个模块就引入哪个模块

import {Viewer} from 'photo-sphere-viewer' // 引入组件
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' // 引入样式

2.声明容器

在Vue文件中声明一个容器，以便将photo-sphere-viewer 在页面中显示

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

3.内容加载

编写JS方法

export default {
  data(){
    return{
      viewer:'', // 声明一个视图对象，以便后期全局进行组件的操作
      imgurl1:require('../../assets/images/testImg.jpg'), // 全景图的图片
    }
  },
  mounted(){
    this.viewer = new Viewer({
      // （必需的） 将包含全景图或元素标识符的 HTML 元素
      container:document.querySelector('#viewer'), 
      // （必需的） 全景路径。必须是默认 equirectangular 适配器的单个 URL。其他适配器支持其他值。
      // photo-sphere-viewer支持多种适配器，这里讲到的是默认的 equirectangular 适配器，使用起来最为简单，但是要求图片必须为全景图
      panorama: this.imgurl1,
      // 这里定义展示视图的大小，也可以通过CSS在样式中定义
      size:{
        width: '80vw',
        height: '80vh',
      },
    });
  }
}

写到这里你的全景图就应该已经加载完成了！我将用到的图片放在下方，需要测试的请自取

4.全部代码

为了方便广大同志的快速复制粘贴，我将页面的全部代码进行统一展示

<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{
      viewer:'',
      imgurl1:require('../../assets/images/XXX.jpg'), // 这里替换成自己的路径
    }
  },
  mounted(){
    this.viewer = new Viewer({
      container:document.querySelector('#viewer'),
      panorama: this.imgurl1,
      size:{
        width: '80vw',
        height: '80vh',
      },
    });
  }
}
</script>

---

总结

这片文章只介绍了photo-sphere-viewer的最基础的用法，photo-sphere-viewer同时还支持很多强大的插件，可以方便的使用锚点等组件完成复杂的交互。
更多的内容大家可以仔细的阅读官网提供的文档，链接放在下发自取
🔗 https://photo-sphere-viewer.js.org