Vue 3集成krpano 全景图展示

星光云全景系统源码

VR全景体验地址

星光云全景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>

效果图

星光云全景系统源码

VR全景体验地址

星光云全景VR系统

Java程序员客栈