Krpano：打造VR全景漫游体验（一）一认识Krpanokrpano简介Krpano是一款全景漫游制作软件和工具

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

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

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

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

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

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

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

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

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

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

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

exportfunctionloadScript(src,obj){if(typeofwindow[obj]==='function'){returnPromise.resolve()}returnnewPromise((resolve,reject)=>{constscript=document.createElement('script')script.src=srcscript.async=truescript.addEventListener('load',()=>{resolve()})script.addEventListener('error',(error)=>{reject(error)})document.head.appendChild(script)})}然后就可以在展示组件里引入这个方法并且在加载成功的时候去调用embedpano方法来生成全景了