前言

研究全景图制作有一段时间了，应该从广本冠道项目开始研究的，一直没有时间记录。最近需要做室内全景展示Demo，借着温习了一下，顺便将温习的过程记录一下。

为什么是Krpano?

全景火热的时候应该是2016年，这一年VR眼镜、硬件设备都被带上了风口。当然也产生了一些全景内容的制作平台，如720云，全景素材网，网展等。作为承接客户需求的开发者，当然不能完全依托第三方开发平台，所以我们需要掌握核心竞争力–如何制作全景。

确定了目标，那就开始搜集资料学习。当前制作全景的工具，主要有pano2vr、Krpano、以及网站自研的全景制作工具。在搜集开发资料和方案筛选后，确认采用Krpano，主要是开发文档比较详细，工具内容比较详实。

学习教程

Krpano中文学习站点–http://www.krpano360.com/

该站点分为入门和初级教程（免费教程），以及VIP教程（付费教程）。如果有一定的编码能力，免费教程足够了，需要定制化的功能可以检索一下。我研究一段时间免费教程，可以基本满足需求。

购买、下载、安装Krpano

最新版： krpano 1.19-pr12
下载地址：https://krpano.com/download/

购买和安装krpano：
教程地址：http://www.krpano360.com/buykrpano/

商用授权码价格： 129欧元

作为技术研究和学习，我选择……当然没有购买！！而是去某宝搜索krpano授权码，还真的有人提供。花了几块钱，购买了Mac和Windows版的授权码。几个月了，这个授权码到现在还是可用的~

不过，作为商业用途，还是强烈的建议，选择商业授权码。毕竟这也是别人的劳动成果，付费鼓励别人维护和创新。

准备工作

下载和安装krpano之后，你需要准备一张2:1的全景图。当然，如何比较经典的还是，一些教程里面的女友图。

当前Demo制作是要展示室内全景的，所以还是去站酷素材网上下载室内全景的素材图片。主要调整比例2：1，当前选择的分辨率比例是1280×640。如下图：

制作多场景，需要准备多张全景图，具体制作过程，请参考中文网教程。

制作全景

1. 打开krpano下载包，你会发现目录如下：

   

2. 拖动全景图至 MAKE PANO (NORMAL) droplet，等待软件生成必须程序目录。

如上，生成的目录，使用webstorm或其他前端编辑器，进入服务器环境即可预览运行结果。

小行星启动界面

你会发现，很多全景的启动页面，会出现俯瞰图。如下图：

使用krpano，只需要修改tour.xml中littleplanetintro="true"

增加背景音乐

准备好音频文件，存放在sound/audioBg.mp3目录下。在tour.xml目录下，找到空白处，增加如下代码：

<action name="bgsnd_action" autorun="onstart">
    playsound(bgsnd, 'sound/audioBg.mp3', 0);
</action>

同时，在vtourskin.xml文件中，找打skin_btn_vr，在下方增加如下代码：

<layer name="skin_btn_sound"     style="skin_base|skin_glow" crop="64|704|64|64"  align="right"      ox="0"   x="130"   y="0"  scale="0.5" onclick="pausesoundtoggle(bgsnd);switch(crop,64|704|40|64,64|704|64|64);switch(alpha,1,0.25);switch(ox,0,-12)"  />

这样在界面上，就会出现音乐播放按钮。音乐会根据浏览器的限制进行自动或点击播放。

最后

展示代码github存放地址：https://github.com/zhulinhai/shinei720

有想预览效果的朋友，可以下载项目本地或服务器端浏览。

祝大家在全景学习过程中，发觉或创造自己的快乐~