krpano+vue3+vite实现VR看房等场景
Vue 3 + Vite
按照需要下载依赖包
npm create vitenpm install vue-router@latest
npm install vuex@latest
npm install --save-dev sassnpm install axios -D
npm install --save-dev element-plusnpm i mockjs -D
npm install vite-plugin-mock -D
krpanoxml编辑
参考地址
krpano+vue3+vite
- 官网下载:https://krpano.com/download/
- 使用 krpano 将全景图转为静态资源
vtour文件夹
。- 软件中
make vtour
点击open images
,在图片所在文件夹生成vtour文件夹
- 软件中
- vue3 中将 vtour文件夹 放入 public。
- index.html 中加入
<script src="./vtour/tour.js"></script>
。 - vue文件
<template><div id="wrapper"><div id="pano"></div></div>
</template><script setup>import { ref, onMounted } from 'vue'const publicPath = ref(import.meta.env.BASE_URL)
onMounted(() => {let swf = `${publicPath.value}vtour/tour.swf`;let xml = `${publicPath.value}vtour/tour.xml`;embedpano({ swf: swf, xml: xml, target: "pano", html5: "auto", mobilescale: 1.0, passQueryParameters: true });
})</script><style scoped>#wrapper {width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}
#pano {width: 100%;height: 100%;
}</style>
- 其他
vtour中skin下的vtourskin.xml
<!--自动旋转-->
<autorotate enabled="true"waittime="1.0"speed="10.0"horizon="0.0"accel="1.0"/><!--导航栏是否显示-->
<action>
...
set(layer[skin_layer].visible, false);
</action>
- enabled:是否开启自动旋转
- waittime:用户不对屏幕操作后,开始自动旋转的等待秒数
- accel:旋转扭曲的速度:角度/秒
- speed:最大旋转速度:角度/秒
- horizon:旋转到特定的水平位置
- tofov:缩放到特定的区域视角
参考
krpano 音乐播放的几种方式参考
krpano+vue3+vite实现VR看房等场景相关推荐
- 接触webGl(three.js)之全景(VR)看房的实现旅程总结
文章目录 前言 实现全景(VR)看房的方式 一.纯Three.js方式 1.安装包 2.实现的业务代码 3.实现演示 二. 使用photo-sphere-viewer 1.安装包 2.实现的业务代码 ...
- 微信小程序---实现VR看房效果
1.前言 客户需求需要实现VR看房功能.使用技术为微信小程序+spring boot. 2.工具 ① 下载PtGui绘制全景图工具:https://www.jb51.net/softs/743790. ...
- VR看房:全景图和移动切换的实现
VR看房 导读 前段时间一直在做 VR看房的全景图漫游,其中包括有一些难点,也有一些学习心得,今天在此做个总结,一来是复习,二来是在此记录下学习的过程,有些bug还未调好,在此先附上链接,看一下效果. ...
- VR看房火热背后,简单谈谈拍摄VR全景图片——普及贴
VR看房是云看房的标配,今年恒大的恒房通,一个月成交的房子合同超过了500亿元! 九商VR全景支持视频.音频.三维产品等全景互动功能,还可在微信.微博.网站.小程序等平实现高质量的全景展示和分享,并已 ...
- Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房.房间切换和自定义标注 photo-sphere-viewer 下载插件 使用 常用参数 Markers插件 使用 ...
- THREE.JS实现看房自由(VR看房)
VR看房 一.前言 二.基础知识 三.场景 3.1 网络模型 3.2 光照 3.2.1 环境光 3.2.2 平行光 3.2.3 点光源 3.2.4 聚光灯 3.2.5 半球光 四.相机 4.1 正交相 ...
- 什么是VR看房,VR看房的优势?
其实VR看房不是一个新概念,而是早就已经实现的一项技术.简单来说,VR看房是通过VR与全景展示技术让用户在线上全方位了解房屋的户型和内部细节,带给用户身临其境的虚拟体验. VR看房是如何制作的? 目前 ...
- vr全景视频如何制作? vr看房有什么好处!
说到vr,在很早以前就已经拥有了这些技术.只是那时候只应用到娱乐场所中,因为这些技术能让人有一股身临其境的感觉.所以人们用vr全景技术能短暂避免一些烦恼从而获取幸福.随着科技越来越发达,vr全景已经不 ...
- 中小中介公司,如何应对链家推出的贝壳找房那种VR看房模式
链家推出「贝壳找房」已有一段时间,其对市场和同业的影响力正在不断发酵.据了解,对于VR看房,链家是耗费2年并投入2个亿来做了这件事,他们从硬件到技术再到内容,全部是自己团队包办的.而对于我们国内的普通 ...
最新文章
- exce中让两列数据一一对应_工作中被重复数据所烦恼?学会这几个Excel技巧,少加班...
- WINDOWS SERVER 2003 组策略应用
- lucene倒排索引瘦身的一些实验——merge的本质是减少cfx文件 变为pos和doc;存储term vector多了tvx和tvd文件有337M...
- 最优化作业02—一维最优化方法
- WeakHashMap和Java引用类型详细解析
- 初见 IsolatedStorage
- redirect java 配置_Java从后台重定向(redirect)到另一个项目的方法
- 面试官系统精讲Java源码及大厂真题 - 21 DelayQueue 源码解析
- 黄金分割圆怎么画matlab,黄金分割线画法图解(操作技巧)
- 部门树_神奇!十堰这个小山村竟然藏着两棵500多年的爱情树!
- Struts2 初探
- windows超级工具AlantopTool
- 脉冲神经网络 神经元模型-IF模型(2)
- Django使用pyjwt实现Token跨域认证登录过程实践
- OpenKruise :SidecarSet 助力 Mesh 容器热升级,TCP的三次握手、四次挥手
- opencv 实现的静态手势识别 进而玩剪刀石头布
- Spring面向切面编程-AOP详解
- Launcher3-桌面布局+主要的类+启动流程
- 今日头条有意向收购锤子科技;原金立总裁加入小米;苹果应用商店出现查开房记录app|雷锋早报...
- 软件测试需求频繁变更,测试中如何应对需求变更问题