一、认识Krpano
krpano简介
Krpano是一款全景漫游制作软件和工具，也可以说一门将VR全景图制作成虚拟的技术，兼容 HTML5 和 Flash，支持Webgl下的WebVR展示，使用专用的krpano xml代码编写全景漫游，可开发出高度定制化的项目，也可利用krpano工具开发在线全景制作及展示平台
生成第一个全景漫游
首先在打开官网，首页就是文档，完整的介绍了krpano的使用，以及一些案例供参考，我们download选择下载
以windows为例，下载下来是一个文件夹，里面有几个可执行文件和几个文件夹，文件夹里面都是一些说明文档和案例以及一些封装好的xml文件来供参考，主要是那几个可执行文件:
- MAKE VTOUR Droplet.exe : 制作漫游批处理可执行文件
- Convert SPHERE CUBE Droplet.exe : 全景格式转换可执行文件
- krpano Testing Server.exe : krpano测试服务器( 浏览器不允许本地打开生成的全景漫游 )
- krpano Tools.exe : 可视化操作界面
- krpanotools.exe : 命令行操作界面
二、vtour文件夹详解
全景漫游制作完成之后会生成一个vtour文件夹，panos文件夹存放上传全景切好的图，plugins文件夹存放一些可能会使用到的插件，skin文件夹存放一些皮肤的文件和图片 ( 底部的操作栏 )，tour.html全景的入口文件，tour.jskrpano的js库，tour.xml全景漫游的文件
打开html文件，可以看到调用了embedpano方法，并且传入主xml和目标id等作为参数，embedpano就是tour.js里的一个方法，通过xml文件里的标签来生成全景，目标id元素来作为全景展示的容器
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)函数表示加载失败
总结
除了展示和切换场景之外还有很多的功能，例如添加热点、背景音乐、特效、嵌入地图等，还可以通过js来和xml进行交互，根据需要动态地调整行为和功能，并且更方便地维护代码
浙公网安备 33010602011771号