一、认识Krpano

krpano简介

Krpano是一款全景漫游制作软件和工具，也可以说一门将VR全景图制作成虚拟的技术，兼容 HTML5 和 Flash，支持Webgl下的WebVR展示，使用专用的krpano xml代码编写全景漫游，可开发出高度定制化的项目，也可利用krpano工具开发在线全景制作及展示平台

目前在使用Krpano的平台包括720云、光鱼全景、四方环视、全景映画等平台，此外，还有一些个人开发的全景项目也使用Krpano，那么哪些人需要学习和了解krpano呢？一般都是需要开发类似上面全景展示平台或者需要高度定制的前后端程序员

生成第一个全景漫游

首先在打开官网，首页就是文档，完整的介绍了krpano的使用，以及一些案例供参考，我们download选择下载

以windows为例，下载下来是一个文件夹，里面有几个可执行文件和几个文件夹，文件夹里面都是一些说明文档和案例以及一些封装好的xml文件来供参考，主要是那几个可执行文件:

MAKE VTOUR Droplet.exe : 制作漫游批处理可执行文件
Convert SPHERE CUBE Droplet.exe : 全景格式转换可执行文件
krpano Testing Server.exe : krpano测试服务器( 浏览器不允许本地打开生成的全景漫游 )
krpano Tools.exe : 可视化操作界面
krpanotools.exe : 命令行操作界面

然后使用 MAKE VTOUR Droplet.exe 来制作一个基本的全景漫游，首先准备好几张全景图(非普通图片，比例一般为2 : 1)，运行MAKE VTOUR Droplet.exe，然后将全景图片拖进去，等待切图完成就会看到多出来了一个vtour文件夹，windows系统点击tour_testingserver.exe运行，ios系统则点击tour_testingserver_macos运行

主要的功能和上面简介的都差不多，只是界面更加精良和美观，当然这都是可以自己定制

可以发现生成的全景被很多水印盖住了，因为这个软件并不是免费的，159欧去掉水印，299欧去掉右键菜单关于krpano的条目 o(￣┰￣*)ゞ

二、vtour文件夹详解

全景漫游制作完成之后会生成一个vtour文件夹，panos文件夹存放上传全景切好的图，plugins文件夹存放一些可能会使用到的插件，skin文件夹存放一些皮肤的文件和图片 ( 底部的操作栏 )，tour.html全景的入口文件，tour.jskrpano的js库，tour.xml全景漫游的文件

打开html文件，可以看到调用了embedpano方法，并且传入主xml和目标id等作为参数，embedpano就是tour.js里的一个方法，通过xml文件里的标签来生成全景，目标id元素来作为全景展示的容器

在tour.xml文件里存放一些场景和皮肤的设置，最重要的就是scene标签，每一个scene标签代表一个漫游全景

vue结合krpano

以vue3为例，将整个vtour文件夹放进public文件里，并且删掉一些多余的xml和图片，这是简化后的目录：

然后封装一个Krpano组件作为展示组件并被App组件引入使用，且只做展示用，其他的逻辑则在App组件里编写

然后按照逻辑要引入tour.js并且调用embedpano方法来生成全景，但是tour.js无法被其他模块导入，所以要将这个tour.js加在全局里作为全局里的一个方法来调用

新建utils文件夹，新建一个js向外导出一个方法并接受两个参数:路径和加载的脚本中定义的对象的名称。并返回一个Promise对象并在其内部创建一个<script>元素，设置src属性为传入的路径，将<script>元素添加到HTML文档的<head>元素中。添加一个load事件监听器，当脚本加载完成时调用resolve()函数表示加载成功，添加一个error事件监听器，当脚本加载失败时调用reject(error)函数表示加载失败

export function loadScript(src, obj) {
    if (typeof window[obj] === 'function') {
        return Promise.resolve()
    }
    return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = src
        script.async = true
        script.addEventListener('load', () => {
            resolve()
        })
        script.addEventListener('error', (error) => {
            reject(error)
        })
        document.head.appendChild(script)
    })
}

然后就可以在展示组件里引入这个方法并且在加载成功的时候去调用embedpano方法来生成全景了

<script setup>
import { onMounted } from 'vue'
import { loadScript } from '../utils/loadScript'

onMounted(() => {
    createPano()
})
const createPano = () => {
    loadScript('/vtour/tour.js', 'embedpano').then((res) => {
        const { embedpano } = window
        embedpano({
            xml: '/vtour/tour.xml',
            target: 'krpano',
            bgcolor: '#000000',
            html5: 'prefer',
            consolelog: false,
            passQueryParameters: true,
        })
    })
}
</script>
<template>
    <div id="krpano"></div>
</template>

总结

除了展示和切换场景之外还有很多的功能，例如添加热点、背景音乐、特效、嵌入地图等，还可以通过js来和xml进行交互，根据需要动态地调整行为和功能，并且更方便地维护代码

Krpano：打造VR全景漫游体验（一）

一、认识Krpano

krpano简介

生成第一个全景漫游

二、vtour文件夹详解

vue结合krpano

总结