krpano+vue3+vite实现VR看房等场景

Vue 3 + Vite

按照需要下载依赖包

npm create vite

npm install vue-router@latest
npm install vuex@latest
npm install --save-dev sass

npm install axios -D
npm install --save-dev element-plus

npm i mockjs -D
npm install vite-plugin-mock -D

krpanoxml编辑

参考地址

krpano+vue3+vite

1. 官网下载：https://krpano.com/download/
2. 使用 krpano 将全景图转为静态资源vtour文件夹。
   • 软件中make vtour点击 open images，在图片所在文件夹生成vtour文件夹
3. vue3 中将 vtour文件夹 放入 public。
4. index.html 中加入<script src="./vtour/tour.js"></script>。
5. 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>

6. 其他
   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 音乐播放的几种方式参考