Annie+krpano结合入门篇

Annie+krpano结合入门篇,新手的个人总结,欢迎大神们批评指正。

  

前段时间在论坛看到了vien007xin、炸天三位大神分享的全景漫游的相关知识,很感兴趣。由于客户也有潜在需求,花了几天时间,我也做了一个Annie2xkrpano结合的小例子。在iphone上测试运行没有问题。由于是初次尝试,实现方法、程序优化、兼容性等等都有待商榷,抛砖引玉,望各位看官不吝赐教。最终源文件下载地址如下:

http://coldstarer.cn/download/Annie2x_krpano.zip


涉及到的知识点如下:

1.   Annie2x的前期准备

2.   krpano的前期准备

3.   通过krpano创建普通全景漫游

4.   krpano生成的漫游文件结构分析

5.   通过krpano创建视频全景漫游

6.   整合Annie2xkrpano

7.   留了两个尾巴


   Annie2x的相关知识来源于咱们的微信和QQ交流群,以及annie2x官网http://ask.annie2x.com/ http://api.annie2x.com/api2x/。 在此再次感谢@小可大神!感谢各位!

Krpano的相关知识来源于http://www.krpano360.comkrpano中文网)和万能的度娘,我仅仅学习了krpano中文网入门教程和少部分初级教程,受益匪浅。在此也感谢krpano中文网的所有者(肥宗)。


回归正文:

一、Annie2的前期准备:

     简化前段时间做的一个项目,仅保留loading页和地址详情页。在地址详情页上,增加两个按钮,一个用来触发普通全景漫游(实例名:map_btn),另外一个用来触发视频全景漫游(实例名:video_btn)


二、krpano的前期准备:

1、版本:最新版本1.19-pr16,不同版本在很多细节上都不同。我是win10系统,下载的是后缀为.exe的自解压文件。下载包解压即可,无需安装。 下载地址:https://krpano.com/download/。下载包解压后目录结构如图所示:

attachments-2018-08-QmNurhxQ5b8904117d3df.png

简单说一下krpano下载包里主要的文件和文件夹:

docu文件夹是部分离线文档;

templates文件夹是官方提供的一系列模板;

viewer文件夹是官方提供的插件和引擎存放位置,包括附带案例;

Convert SPHERE CUBE Droplet.exe:将球面图和立方体图相互转化的工具

krpano Tools.exe:用来注册krpano、修改漫游xml文件的图形界面工具;

krpano Testing Server.exe:本地测试服务器,在服务器环境下才能测试生成的漫游项目(当然,我们也可以把漫游项目拷贝到自己的服务器下来测试);

以“droplet.bat”结尾的六个批处理文件:用来批处理生成漫游项目。

2、购买与注册:官网提供下载的各个版本和正式版功能相同,但生成的漫游会有水印。我没有购买,选择注册。注册方法很简单,双击krpano文件夹中的krpano Tools.exe,弹出注册码输入框,输入注册码,点击注册按钮即可。我使用了vien007分享的注册码,完美!感谢vien007

attachments-2018-08-yaJ8WrSN5b8904f4cb86f.png

3、漫游素材:球面全景图两张(图片宽高比为2:1,包含了360°x 180°空间的照片),我是从网上下载的,盗版勿究哈!切记:图片一定不要用中文命名。

attachments-2018-08-8bJCAzuH5b8905132883d.png

视频使用了krpano自带example里的视频,后文我会介绍。

 

三、通过krpano创建普通全景漫游:

krpano并没有图形化的操作界面,而是通过前面提到的、后缀为.bat的六个批处理文件来自动生成漫游项目。按照文件名可以看到bat文件分两类:以“MAKE PANO”开始的三个文件和以“MAKE VTOUR”开始的三个文件。前三个批处理文件生成的漫游项目,多个场景之间相互不链接,每个场景都有独立的htmljsxmlswf文件,不方便使用,所以推荐使用MAKE VTOUR的方式。而在后者中,“MAKE VTOUR (NORMAL) droplet”生成的漫游项目,是单分辨率,且需要一次性载入所有的全景图素材,所以也不推荐。最终,我们一般情况下会使用最后两种方法:如果有VR需求,则使用“MAKE VTOUR (VR-OPT) droplet”;如果没有VR需求,则使用“MAKE VTOUR (MULTIRES) droplet”。  

生成方法非常简单:全选需要生成漫游的全景图,鼠标拖放到对应的droplet批处理文件上,松开鼠标,弹出一个命令行窗口,等待处理完成后,按任意键关闭窗口即可。

attachments-2018-08-CuGwV3e45b890535e8beb.png

此时,在全景图存放的文件夹里,会生成一个名字为tour的新的文件夹,也就是漫游项目所在的文件夹。双击文件夹中的tour_testingserver.exe,就可以测试浏览了。

 

四、krpano生成的漫游文件结构分析(即tour文件夹结构

attachments-2018-08-JsbRPK3M5b89055b3894c.png

panos文件夹:存放批处理生成的全景图切片

plugins文件夹:存放漫游需要的插件

skin文件夹:顾名思义,存放漫游项目涉及到的图片文件及其配置文件

tour.html:嵌入全景项目的网页,服务器模式下浏览全景项目的起始页。

tour.jskrpano引擎文件。无论是普通全景漫游,还是视频全景漫游,使用的是同一个js文件。

tour.swfflash版本的漫游浏览入口文件。在krpano最新版中,无论是pc端还是移动端,都首推html5的浏览模式了。

tour.xml:漫游项目配置文件。这个文件很重要,包括漫游项目的通用配置和每个场景的详细配置信息。而它include进来的vtourskin.xml,更是包含了整个漫游项目的界面元素<layer>、事件<events>、动作<action>等信息。后面的内容,会涉及到针对xml文件的修改。

tour_testingserver.exewindows环境下的测试服务器,双击运行该服务器即可浏览漫游。

tour_testingserver_macosmac 环境下的测试服务器

 

五、通过krpano创建视频全景漫游

有一点需要明确:krpano本身不限制视频的尺寸。视频的尺寸受限与用户所用的系统和浏览器。所以,我们可以通过一个简单的方法,实现视频全景漫游。

首先通过上文中介绍的方法,任意找一张全景图,生成一套默认的漫游文件结构(生成的漫游所使用的文件,都会存放在tour文件夹内)。然后将krpano路径下,viewer\examples\videopano这个文件夹内的所有文件,全部复制到tour文件夹内。提示替换文件时,选择确定。

attachments-2018-08-gJQe8joa5b89058916284.png


  在tour文件夹内,删除下图标注的文件和文件夹

attachments-2018-08-cqa6IMMy5b89063d33724.png

tour.html里如下图对应的xml文件名替换为“videopano.xml

attachments-2018-08-R2Vm5JZS5b89069c5fdf8.png

这样视频全景漫游就搞定了,这是最简便的方法。如果想使用我们自己的视频,替换该文件夹里对应的视频即可。关于视频的制作,请自行查询相关资料。

 

六、整合Annie2xkrpano

漫游制作好之后,如何将它们和现有的项目结合起来?本文仅仅介绍如何通过annie2x控制漫游的显示、隐藏和播放。更高大上的方法还请各位看官留言赐教。思路如下:

1、将普通漫游和视频漫游里所有的文件,都拷贝到annie2x生成的index.html目录下。(本文不考虑打包,也没有做文件路径的合理化,实际项目执行时大家可以根据需求自己处理)。

2、在index.html里,增加 两个divid分别为“pano”、“panoVideo”,用来做漫游的容器,设置z-index0,放在最底层;

3、设置annie引擎对应的div容器z-index层级为1,浮在漫游容器上层。当播放漫游时,隐藏这个div

4、增加一个div作为关闭按钮,id为“closeKrBtn”,z-index层级为2,放在最上层。当激活krpano漫游后显示该按钮;点击按钮时,隐藏krpano漫游,显示annie2x容器。

5、需要注意的是,当隐藏正在播放的视频漫游时,应该暂停漫游,以避免画面消失而声音还在播放的现象。这时候要获取视频漫游的播放状态,再根据状态来判断是否需要调用krpano的播放/暂停方法。Krpano提供一个叫作krpano Javascript-Interface object的对象来实现和js的通信,我们在krpano初始化函数embedpano()中增加onready的自定义回调函数就能够得到该对象的引用,再使用它的getcall方法,从vtourskin.xml文件里获取需要的属性和需要执行相应的方法。

attachments-2018-08-hFcqL2Lq5b8906f550f50.png attachments-2018-08-T9pNm7gZ5b89071317b51.png

6、这里对漫游再做一些优化:修改krpano的英文标题,增加漫游热点。打开普通全景漫游对应的配置文件tour.xml,修改第一行的title属性为“会场坐标漫游”;修改两个<scene>标签里对应title的值。

attachments-2018-08-xtbAXnoA5b8907234bd37.png

attachments-2018-08-pggxZWGN5b8907317c004.png

修改视频全景漫游对应的配置文件videopano.xml<scene>标签对应的标题title

attachments-2018-08-Y7RLxrYK5b890741c79cd.png

使用krpano下载包里的krpano Tools.exe打开tour.xml点击“Add hotspot,增加一个指示箭头。

attachments-2018-08-sSD3sL7S5b890757156d2.png

将箭头拖放到合适位置后,点击箭头,弹出编辑热点面板,在下拉列表里选择“酒店大堂”,然后点Save,完成编辑,关闭面板。

attachments-2018-08-3GjOTKP15b8907702a26e.png

最后点击Save tour.xml按钮,关闭漫游编辑工具。

7、为了避免在index.html中加载krpano的引擎文件tour.js导致loading延迟出现,可以在positon.fla的库里新建一个空的mc,将绑定类设置为“tour”,然后将tour.js文件放到src\position里。具体方法可参考http://ask.annie2x.com/article/47。话说我在这里犯了@小可提到的低级错误,请大家引以为戒。

搞定。Over


七、尾巴:

1、或许各位看官一开始就注意到了,我在文章开头提到,该案例仅仅在iphone上测试没有问题。在安卓上运行krpano视频全景时,微信会弹出浏览器窗口,像播放一般视频那样播放,而不能实现全景模式的播放。这个问题在krpano1.19-pr8版本上有了解决方案。请参考http://ask.annie2x.com/question/50  @xin的方法。(也就是使用@xin提供的videoplayer.js文件,替换默认plugins文件夹里的对应文件)。但这个js文件在pr16最新版里无法加载视频。哪位大神有最新版的解决方法,请赐教!期待ing!

2、曾尝试使用FloatDisplay,将漫游作为一个annie2x的显示对象加载进来。但宽高100%适配的漫游在annie里自动缩小,设置floatDisplay的宽高也没有效果。哪位高人搞定了,希望能留言指点!

 

另:krpano360提供了网盘下载地址,包含多个版本,其中就有pr8

http://www.krpano360.com/krpanodonwload/

 

  • 发表于 2018-08-31 17:25
  • 阅读 ( 814 )
  • 分类:AnnieJS引擎

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
coldstarer

1 篇文章

作家榜 »

  1. 皮卡丘先生 13 文章
  2. 大北兔 9 文章
  3. hero 9 文章
  4. vien007 7 文章
  5. anlun214 5 文章
  6. Even 4 文章
  7. 炸天 4 文章
  8. ningbnii 3 文章