Vue 3集成krpano 全景图展示

Vue 3集成krpano 全景图展示

星光云全景系统源码

VR全景体验地址

星光云全景VR系统

将全景krpano静态资源文件vtour放入vue项目中

导入vue之前需要自己制作一个全景图

需要借助官方工具进行制作
工具下载地址：krpano工具下载地址

注意事项：vue@cli3没有static，需要放在public目录下

在项目的index.html 文件中引入tour.js

<script src="/vtour/tour.js"></script>
1

写一个展示全景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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在页面引入组件展示全景图

<template>
  <div id="wrapper">
    <Vtour></Vtour>
  </div>
</template>
<script lang="ts" setup>
 
  import { Vtour } from '@/components/Vtour';

</script>
<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图

星光云全景系统源码

VR全景体验地址

星光云全景VR系统

Java程序员客栈