devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

photo-sphere-viewer 全景图Vr 720全景查看（vue篇）

作者：Monodyee | 2024-03-27 18:13:17

赞

踩

photo-sphere-viewer

一、安装以及引入方式

  1. npm install @photo-sphere-viewer/core
  2. /***插件安装**/
  3. npm install @photo-sphere-viewer/markers-plugin
  4. npm install @photo-sphere-viewer/gallery-plugin
  5. npm install @photo-sphere-viewer/autorotate-plugin
  6.

二、PhotoSphereViewer.vue

  1. <template>
  2.   <div id="viewer"></div>
  3. </template>
  4.  
  5. <script>
  6. import { Viewer } from "@photo-sphere-viewer/core";
  7. import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
  8. import { GalleryPlugin } from "@photo-sphere-viewer/gallery-plugin";
  9. import { AutorotatePlugin } from "@photo-sphere-viewer/autorotate-plugin";
  10. import "@photo-sphere-viewer/core/index.css";
  11. import "@photo-sphere-viewer/markers-plugin/index.css";
  12. import "@photo-sphere-viewer/gallery-plugin/index.css";
  13. export default {
  14.   props: {
  15.     hasAnimate: {
  16.       type: Boolean,
  17.       default: true,
  18.     },
  19.     imgList: [],
  20.     hasGallery: {
  21.       type: Boolean,
  22.       default: true,
  23.     },
  24.   },
  25.   components: {},
  26.   data() {
  27.     return {
  28.       viewer: "",
  29.       panoramaUrl: "",
  30.       markersPlugin: "",
  31.       autorotatePlugin: "",
  32.       galleryPlugin: "",
  33.       currIndex: 0,
  34.       animatedValues: {
  35.         pitch: { start: -Math.PI / 2, end: 0.2 },
  36.         yaw: { start: Math.PI, end: 0 },
  37.         zoom: { start: 0, end: 50 },
  38.         fisheye: { start: 2, end: 0 },
  39.       },
  40.       defaultUrl: require("../assets/3.jpg"),
  41.     };
  42.   },
  43.   created() {},
  44.   mounted() {
  45.     this.panoramaUrl = this.imgList[0].panorama || this.defaultUrl;
  46.     this.initViewer();
  47.     this.handelListenerViewerClick();
  48.     this.handleSelectMarker();
  49.     this.handleHoverMarker();
  50.     this.handleLeaveMarker();
  51.     this.$nextTick(() => {
  52.       this.handleGalleryChange();
  53.     });
  54.   },
  55.   watch: {},
  56.   methods: {
  57.     initViewer() {
  58.       const _this = this;
  59.       this.viewer = new Viewer({
  60.         container: "viewer",
  61.         panorama: this.panoramaUrl || this.defaultUrl,
  62.         caption: "test",
  63.         loadingImg: require("../assets/loader.gif"),
  64.         touchmoveTwoFingers: true,
  65.         mousewheelCtrlKey: false,
  66.         navbar: [
  67.           "autorotate",
  68.           "zoom",
  69.           "markers",
  70.           "move",
  71.           "download",
  72.           "gallery",
  73.           {
  74.             title: "Change points",
  75.             content: "
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/326112
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。