Vue实现vr看房效果

懒大王9527

已于 2024-07-01 11:14:05 修改

阅读量1.6k

点赞数 2

文章标签： vue js vr

于 2022-08-19 11:39:27 首次发布

本文链接：https://blog.csdn.net/cdd9527/article/details/126421447

版权

效果展示图：

1.下载依赖：

VS code终端执行两个命令

npm install three --save-dev

npm install photo-sphere-viewer

2.<template>模块代码

<template>
  <div class="demo-container">
    <div id="viewer"></div>
  </div>
</template>

3.<script>模块代码

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { MarkersPlugin } from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/plugins/markers.css";
export default {
  data() {
    return {
      viewer: "",
      markersPlugin: "",
      itemArr: [
        {
          name: "house0",
          img: require("@/views/montage/images/yidongyun/marks.jpg"),
        },
        {
          name: "house1",
          // img: require('@/assets/imgs/demo/demo1.jpeg'),
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ebbea0343bf44d2aabab3dc58aa4c3a~tplv-k3u1fbpfcp-watermark.awebp",
        },
        {
          name: "house2",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6df92ba39aa94aec889582df60d3d0d0~tplv-k3u1fbpfcp-watermark.awebp",
        },
        {
          name: "house3",
          img: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40135df7df034eb5a76daa76f26fe046~tplv-k3u1fbpfcp-watermark.awebp",
        },
      ],
      currentDataMark: [],
      // 数据配置，每个图片中存在几个可点击的标记，tooltip对应的是图片名称
      dataMark: {
        house0: [
          {
            // 自定义样式的标记
            id: "circle0",
            longitude: 1.5,
            latitude: -0.28,
            html: "<b>house1</b> &hearts;", // 显示内容
            anchor: "center center",
            scale: [0.5, 1.5],
            style: {
              // maxWidth: "100px",
              color: "white",
              fontSize: "20px",
              fontFamily: "Helvetica, sans-serif",
              textAlign: "center",
            },
            note: 1,
          },
          {
            id: "circle1",
            tooltip: "house2",
            circle: 31,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: -1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 2,
          },
        ],
        house1: [
          {
            id: "circle0",
            tooltip: "house2",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 2,
          },
          {
            id: "circle1",
            tooltip: "house3",
            circle: 31,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: -1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 3,
          },
        ],
        house2: [
          {
            id: "circle0",
            tooltip: "house0",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 0,
          },
        ],
        house3: [
          {
            id: "circle0",
            tooltip: "house1",
            circle: 30,
            svgStyle: {
              fill: "rgba(255,255,0,0.3)",
              stroke: "yellow",
              strokeWidth: "2px",
            },
            longitude: 1.5,
            latitude: -0.28,
            anchor: "center center",
            note: 1,
          },
        ],
      },
    };
  },
  mounted() {
    //默认显示第一张照片
    this.currentDataMark = this.dataMark.house0;
    this.setViewer(this.itemArr[0].img);
  },
  methods: {
    setViewer(panorama) {
      if (this.viewer)
        try {
          this.viewer.destroy();
        } catch (e) {
          console.log(e);
          const viewer = document.querySelector("#viewer");
          viewer.removeChild(viewer.childNodes[0]);
        }
      this.viewer = new Viewer({
        container: document.querySelector("#viewer"),
        panorama: panorama,
        size: {
          width: "100vw",
          height: "100vh",
        },
        plugins: [
          [
            MarkersPlugin,
            {
              markers: this.currentDataMark,
            },
          ],
        ],
        navbar: [
          {
            hidden: false,
          },
        ],
      });
      this.viewer.once("ready", () => {
        //自动旋转
        this.viewer.startAutorotate();
      });
      this.markersPlugin = this.viewer.getPlugin(MarkersPlugin);
      this.markersPlugin.on("select-marker", (e, marker) => {
        // 判断数据中的note字段选择要进入的场景图片
        if (e.args[0].config.note) {
          let index = e.args[0].config.note;
          let indexName = "house" + index;
          this.currentDataMark = this.dataMark[indexName];
          this.setViewer(this.itemArr[e.args[0].config.note].img);
        }
      });
    },
  },
};
</script>

4.<style>模块的代码：

<style lang="scss" scoped>
.demo-container {
  position: relative;
  min-width: 1439px;
  margin: 0 auto;
  #viewer {
    margin: 0 auto;
  }
}
</style>