一、认识Krpano
Krpano是一款全景图像和虚拟现实的制作工具和展示引擎，通过它可以创建高质量的全景虚拟现实体验。使用Krpano可以构建交互式全景图片和视频，添加导航和注释，创建虚拟旅游和景观介绍等等。Krpano支持多种输出格式，包括Flash、HTML5、iOS和Android等平台，并且可以在各种设备上流畅运行。
1、链接导航🧭
Gigapixel / Multiresolution超高画质像素/多少分辨率
News新闻 • Examples例子 • Documentation文档 • Download下载 • Buy购买 • Forum论坛 • Contact联系
2、Krpano技术栈说明
- HTML5和CSS3：krpano使用HTML5和CSS3进行页面渲染和布局。
- JavaScript：krpano主要使用JavaScript实现交互和动态效果。
- WebGL：krpano使用WebGL进行实时渲染和图形加速。
- XML：krpano使用XML语言来定义虚拟全景场景中的各种元素和属性。
- AJAX和JSON：krpano使用AJAX和JSON进行异步加载和交互。
- CSS3D和WebXR：krpano利用CSS3D和WebVR技术来实现虚拟全景场景的3D显示和虚拟现实体验。
- Canvas：krpano使用Canvas技术来创建图形和渲染场景。
- 跨平台：krpano可以运行在不同的平台上，包括Windows、Mac、Linux、iOS、Android等。
3、Krpano软件的实现原理
txt
图像切片：将全景图像切割成多个小图像，减小单个图像的大小，提高加载速度。
控制器：通过控制器实现用户对全景图像的交互，包括鼠标拖拽、缩放、视角切换等。
XML配置文件：通过XML配置文件来描述全景图像的显示信息，包括初始视角、切片大小、缩放比例等。
渲染引擎：通过渲染引擎将切片图像拼接为完整的全景图像，并将其显示在用户界面上。
插件扩展：可以通过插件扩展来实现更多的功能，如视频播放、音频播放、热点添加等。总体来说，krpano的实现原理是通过图像切片、控制器、XML配置文件、渲染引擎和插件扩展等技术，实现了一款基于Flash和h5技术的全景图像展示引擎。
4、Krpano软件的安装和使用流程
Krpano的安装和使用流程如下：
1.下载Krpano软件包，截止2023年5月5日，最新版本为1.21，支持：Windows、MacOS、Liunx Krpano官网下载地址
2.解压软件包(我使用的MacOS)
将下载的krpano-1.21.dmg文件解压缩到本地计算机上的任何目录中，安装后目录如下：
js
- docu：说明书 图片、插件、工具、说明文件
- templates：模版 主要包含了krpano里面的配置文件, 比如以 .config结尾的配置文件、.xml 皮肤的一些模版文件
- plugins：插件
- viewer：观察者、观看
- examples：案例
- plugins：案例中用到的一些插件
- krpano.js 、krpano.swf：是krpano的内核文件、krpano.xml 是主 xml文件
- Convert SPHERE CUBE Droplet：转换 球面全景/面积全景 批处理文件
- documentation.html：官方文档文件
- examples.html：案例文件
- krpano Testing Server krpano：测试服务器
- krpano Tools：可视化的图形操作界面，修饰、添加热点、更改皮肤等。
- krpanotools.exe：在命令行中使用
- license.txt：版本 版权
- MAKE VTOUR Droplet：是krpano生成vr虚拟漫游的批处理工具2、创建全景图
进入解压后的软件包的目录，可以在MacOS中双击krpano Tools.app文件打开Krpano软件，窗口如下：
在打开Krpano软件后，点击"Open Images"按钮选择拍摄好的全景图，注意：将全景图放到某个特定的文件夹中，后续会默认在改文件夹中生成名称为"vtour"的文件夹，该文件夹中内容即为全景项目工程，可通过该项目进行全景项目的定制化开发。
1、关于vtour文件夹目录下的各文件介绍：
vtour 文件夹结构
js
vtour/
| -- panos/ #存放全景切片图片的文件夹
| -- skin/ #存放皮肤相关文件
| -- plugins/ #用来存放插件
| -- tour.js #内核文件，包含了全景漫游中常用的Js函数，用于实现交互和其他功能。
| -- tour.xml #生成全景的相关配置,可以将多个跳转的场景包含到这个主场景里面。
| -- tour.html #用来浏览全景的页面，需要本地服务环境
| -- tour_testingserver.exe #windows系统中打开测试服务器并打开html文件进行本地浏览。
| -- tour_testingserver_macos #mac系统中打开测试服务器并打开html文件进行本地浏览。2、查看全景图
双击vtour文件夹中的tour_testingserver_macos文件可自动在浏览器中执行全景浏览效果。 
可视化的图形操作界面，修饰、添加热点、更改皮肤等
js
load tour.xml # 加载文件 tour.xml
Set as startup view # 设置为启动试图
Add hotspot # 添加热点
Edit hotspot # 编辑热点
Edit tour.xml # 编辑 tour.xml
Save tour.xml # 保存 tour.xml
Open tour folder # 打开访问文件夹vtour 运作机制
Krpano 是通过viewer引擎来实现浏览静态图片时产生"三维"效果，而这一切则是通过tour.html这个入口文件。
过滤掉一些没用的代码，可以看到入口文件主代码如下：
js
<div id="pano"></div> // 创建嵌入容器
<script src="tour.js"></script> // 引入脚本（html5渲染器）
<script>
embedpano({
swf: "tour.swf", //有则表示加载flash引擎，如果设置html5:only则不需要该值
xml: "tour.xml", //启动时的配置文件
target: "pano", //要渲染到的目标容器ID
html5: "only", //如果有需要用到flash，可设置为auto
//id: "krpanoSWFObject", //默认的krpano对象，每一个viewer对应唯一id，与JS交互时要用到
mobilescale: 1.0, //移动设备缩放，1表示不缩放，默认0.5
passQueryParameters: false //是否接受URL传参，例如：tour.html?html5=only&startscene=scene2
});
</script>
创建对象及配置参数
js
awk
复制代码
embedpano({
swf:"krpano.swf", // flash渲染器
xml:"krpano.xml", // 主配置文件 缺省的时候会调用krpano.xml和krpano.swf 不加载设置0即可
target:"pano", // 嵌入容器id
id:"krpanoSWFObject", // 当前全景id，javascript接口调用会使用此id
bgcolor:"#000000",// 背景颜色
html5:"auto", // html5模式（auto：自动；prefer：优先使用html5；fallback：优先flash；only：只使用html5；always：始终使用html5-仅用于测试；never：始终使用flash；可加上webgl或css3d渲染技术，如auto+css3d）
flash："auto",// flash模式（auto,prefer,fallback,only,never和html设置类似）
wmode:"window",// flash模式设置（window：窗口；opaque：不透明；opaque-flash：不透明，仅限flash；transparent：透明的；transparent-flash：透明的，仅限flash；direct：最佳性能，但可能不兼容旧系统和浏览器）
localfallback:"http://localhost:8090",
vars:{},// 在xml加载解析后设置启动变量
initvars：{},// 在xml加载解析前设置启动变量，可以在地址进行查询（our.html?initvars.variable=value）
basepath:...// 基本路径 （相对于krpano.swf）
consolelog:false,// 是否在浏览器控制台打印日志信息
mwheel:true,// 是否启用鼠标滚轮
focus:true,// 获得焦点
webglsettings:{preserveDrawingBuffer:false, depth:false, stencil:false},//webgl设置
mobilescale:0.5, // 移动设备缩放
fakedevice:"",// "mobile", "tablet", "desktop"；模拟设备 （仅限测试）
onready:function(){},// 准备就绪回调函数，一般当javascript调用krpano接口的时候，需要在此方法内
onerror:function(){},// 错误回调函数
passQueryParameters:true, // 启用url查询参数（ html5, flash, wmode, mobilescale, fakedevice, initvars）作为变量传递，如tour.html?html5=only&startscene=scene2&initvars.design=flat
});