Vue实现vr看房效果

这篇具有很好参考价值的文章主要介绍了Vue实现vr看房效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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>模块的代码:文章来源地址https://www.toymoban.com/news/detail-512549.html

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

到了这里,关于Vue实现vr看房效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(49)
  • VR全景如何应用在房产行业,VR看房有哪些优势

    导语: 在如今的数字时代,虚拟现实(VR)技术的迅猛发展为许多行业带来了福音,特别是在房产楼盘行业中。通过利用VR全景技术,开发商和销售人员可以为客户提供沉浸式的楼盘浏览体验,从而带来诸多优势。 一、了解VR全景技术的基本原理 VR全景技术是一种模拟真实场

    2024年02月03日
    浏览(46)
  • 在vue项目里,Element-Ui中el-form 实现一行两个表单效果

    1.首先使用elementUi中的Layout 24分栏进行布局,将整个form表单放入24分栏里 如图所示: 2.再将需要同行显示的表单放入el-row中的el-col中去 3.然后再根据你的需求控制一下表单大小就ok啦  全部代码: 效果图如下:  

    2024年02月11日
    浏览(45)
  • 【js&three.js】全景vr看房进阶版

    Scene场景 指包含了所有要渲染和呈现的三维对象、光源、相机以及其他相关元素的环境;场景可以被渲染引擎或图形库加载和处理,以生成最终的图像或动画 常见属性: 常见方法: Geometry  几何体 指的是表示和描述三维对象形状的数据, 描述了对象的形状 常用的Geometry(几

    2024年02月10日
    浏览(44)
  • 线上售楼vr全景看房成为企业数字化营销工具

    在房地产业中,VR全景拍摄为买家提供了虚拟看房的全新体验。买家可以通过相关设备,远程参观各个楼盘的样板间和实景,感受房屋的空间布局和环境氛围,极大地提高了购房决策的准确性。对于房地产开发商和中介机构来说,VR全景拍摄还可以帮助他们在线上展示各种房源

    2024年02月12日
    浏览(39)
  • 沉浸式VR虚拟实景样板间降低了看房购房的难度

    720 全景是一种以全景视角为特点的虚拟现实展示方式,它通过全景图像和虚拟现实技术,将用户带入一个仿佛置身其中的沉浸式体验中。720 全景可以应用于旅游、房地产、展览等多个领域,为用户提供更为直观、真实的体验。 在房地产领域,720 全景可以为用户提供更为真实

    2024年02月11日
    浏览(37)
  • 实现ElementUI中两个Select选择联动效果

    先上图 通过赋值的方式实现 即子级下拉选项循环数组为空 将所需的值对空数组 重新赋值 代码如下 第一个循环数组为 procedureType 第二个是 causeGroup 暂且称之为父级与子级 须注意的是父级下拉绑定的change事件 要对子级作出滞空操作 也就是 清空子选项的值 不然会出现切换选

    2024年02月15日
    浏览(45)
  • 实现以管理员权限打开window终端cmd,并在终端里执行多条指令的功能

    本文实现以管理员权限打开window终端cmd,并在终端里执行多条指令的功能。 以挂载vhd虚拟盘、卸载vhd虚拟盘为例。 一、挂载vhd虚拟盘 C#工程 vhdAttach, 生成vhdAttach.exe,vhdAttach.exe的功能为:启动windows终端cmd.exe,读取attach-vhd.txt中的内容,并在终端里执行attach-vhd.txt中的多条指令

    2024年02月10日
    浏览(54)
  • vue项目下载依赖包失败解决方法

    查看仓库地址npm get registry 查看地址中是否包含依赖包,例如查看依赖vue-pdf 命令  npm view vue-pdf 查看仓库配置 命令  npm config list 更换仓库地址,地址可更换为 私服地址     命令 npm set registry  https://registry.npmmirror.com/      5.单独下载某个依赖包(地址需修改成私服地址)

    2024年02月11日
    浏览(41)
  • 使用Pano2VR实现全景图切换和平面图效果

            本文在文章《使用Pano2VR实现背景音乐、放大/缩小、旋转、缩略图和直线/立体/鱼眼模式等》基础上,增加全景图切换和平面图效果;效果如下图(为了可以上传缩小屏幕,属于PC端运行):         1. 运行Pano2VR软件后,打开文章 《使用Pano2VR实现背景音乐、放

    2024年02月06日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包