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

Posted 2023-04-01 YIGE_MO

文章目录

• 前言
• 一、引入photo-sphere-viewer？
• 二、使用步骤
• • 1.引入库
  • 2.声明容器
  • 3.内容加载
  • 4.全部代码
• 总结

---

前言

由于工作的需求，要实现全景图片的展示与预览，本来以为会是一个很难的内容，没想到使用现成的组件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

vue-photo-preview 图片放大功能

查看图片详情，放大图片

使用方法：

1.安装

npm install vue-photo-preview --save

2.引入（全局或局部）

import preview from ‘vue-photo-preview‘
import ‘vue-photo-preview/dist/vue-photo-preview‘
import ‘vue-photo-preview/dist/skin.css‘
Vue.use(preview);

3.使用（template中）

//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">

//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">

<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">

<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">