krpano是一个可以实现定制化全景项目的根据,很多在线可视化全景平台都是基于krpano开发而来。它本身不开源,商用需要付费购买,否则会有水印,购买方式读者可在官网自行了解。
本文会从零开始做一个完整的全景项目,希望读者跟随步骤完成后能够了解krpano的基本用法,不对krpano的语法做深入讲解。
其中docu文件夹是krpano的文档,templates提供了一系列模板,viewer则是存放例子的地方。双击krpanoTestingServer.exe打开后,可以看到一个弹窗,提供了本地服务地址,点击进入后打开可以看到与上图相同的结构,点击documentation.html可以查看文档,点击examples.html可以看到所有的案例,这些读者可自行浏览研究。
我们的重点在于最下面的.bat文件,这几个文件是用来生成krpano所需要的全景图的。可以看到下面一共6个文件,其中第一个是生成平面图的,最后一个是生成vr所需要的图的,这两个我们都暂且忽视,重点的是中间的4个。首先分析一下它们的意思,不难发现MAKEPANO和MAKEVTOUR是两种不同的类型,它们分别表示生成单个场景和生成一组场景,后面括号里的NORMAL和MULTIRES表示生成的全景图的类型,NORMAL表示生成6个面的全景图,MULTIRES表示生成更加细分的全景图,读者自行操作一下即可发现其中区别。
由action标签包裹的这一段表示启动时自动加载第一个场景。
我们要实现的第一个功能是在场景里添加一个热点,首先在第一个scene中添加一个hotspot标签
上面的操作只是在单个场景中进行,实际开发中一般是有多个场景的,场景间也能自由的跳转,所以我们接下来就实现点击热点进行跳转的功能。首先继续加入新的action:
有时候热点需要附带一些文字,如果将文字做在热点上,热点多的时候需要很多图片,显然是比较麻烦的,直接将文字分离出来是更好的选择。
不难发现,目前所做的全景图,可以上下拖动看到最顶部和最底部,一般来说看场景时,我们希望用户是在一个相对平视的范围内,同时也不希望用户缩放过大的范围,所以要对场景进行一些配置去限制这个范围。可以看到我们当前的view配置如下:
上面的操作都是在xml文件里进行的,那么问题来了,如果想要点击热点,让页面出现一个弹窗,或者是进行更复杂的dom操作呢?krpano也提供了xml和js交互的方法:jscall
我们首先在tour.html随便里面添加一个方法:
functionshowTips(){ alert('这是一个弹窗')}接下来在场景里再添加一个热点,注意,同一个场景下hotspot的name属性不能重复
小行星开场动画也是一个常用的功能,首先一样是添加代码,可以看到,这段代码里有两个action,一个event,第一个action是小行星动画的主体,第二个action是用来控制热点的显示,以免刚进入场景时就显示热点,event是表示文件夹加载后执行小行星动画。
def(variable,type,value*)定义变量variable:变量名。type:变量类型,有boolean,number(数字),integer/int(整数),uint(无符号整数),string,object,array
setinterval(id,delay,actions)创建定时器id:每个interval需要的唯一iddelay:间隔秒数actions:执行函数
calc(variable,expression)由于这里没发像js里一样自由使用运算,所以大部分计算要使用calc完成variable:变量expression:表达式
set(variable,value)给变量赋值
inc(variable,byvalue*,max*,min*)变量增加或减少某个值,可定义上限和下限byvalue:增/减的值
if(condition,then-actions,else-actions*)if函数,语法如下if(条件,执行函数a,else-if条件,执行函数b,...(其他条件和执行函数)执行函数c)
if可能有点难理解,举个例子,在js里面这样的一段代码:
if(number==1){ fnA();fnB();}elseif(number==2){ fnC();}else{ fnD();}在krpano里是这样的:
if(number==1,fnA();fnB(), number==2,fnC(),fnD()); 那么再回头看一下这个action就很清楚了,首先我们定义了三个变量,让它每0.05帧加0.01,利用flag来增或减,实现ath和atv的变化(这两个值是自动获取的)。
如果用js来写,相当于这样:
vartime=0;varmax=0.1;varflag=true;setInterval(function(){time+=0.01;if(flag){ath=ath+time;atv=atv+time;}else{ath=ath-time;atv=atv-time;}if(time>=max){flag=!flag;time=0;}},1000)结语对于krpano的入门指南就到这里啦,如有写错或不合理的地方,欢迎指正。