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程序員客棧