Vue 3集成krpano 全景图展示
星光云全景系统源码
VR全景体验地址
将全景krpano静态资源文件vtour放入vue项目中
导入vue之前需要自己制作一个全景图
需要借助官方工具进行制作
工具下载地址:krpano工具下载地址
注意事项:vue@cli3没有static,需要放在public目录下
在项目的index.html 文件中引入tour.js
<script src="/vtour/tour.js"></script>
写一个展示全景VR组件
下方代码使用来展示你所制作的全景vr组件,我这里是使用vue 3写的组件,具体环境按照自己本地代码写
<template>
<div id="container">
<div id="pano"></div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
defineOptions({ name: 'Vtour' });
nextTick(() => {
loadKrpano();
});
function loadKrpano() {
// 此处地址写死的,你可以替换成项目地址,例如通过变量获取process.env.BASE_URL 按照实际替换属性
let xml = `http://192.168.1.60:5173/vtour/tour.xml`;
embedpano({
xml: xml,
target: 'pano',
html5: 'auto',
mobilescale: 1.0,
passQueryParameters: true,
});
}
onMounted(loadKrpano);
</script>
<style scoped>
#container {
width: 100%;
height: 100%;
position: absolute;
}
#pano {
width: 100%;
height: 100%;
}
</style>
在页面引入组件展示全景图
<template>
<div id="wrapper">
<Vtour></Vtour>
</div>
</template>
<script lang="ts" setup>
import { Vtour } from '@/components/Vtour';
</script>
<style scoped>
</style>