基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎

最近经历了很多事情,感觉成长了很多,但是挺难受的,回来写写博客打发时间。

这次准备分享一个基于web的全景漫游自动生成加编辑平台的技术实现,采用技术如下

开发工具:myEclipse2014   Zend Studio   Sublimetext3      


前端:php+html+css+js+jquery   


后台:spring+struts2+hibernate     +   jython
数据库:mysql


全景引擎:krpano



这是我们的主页以及一键生成功能和编辑功能(以前做了个ppt,直接截里面的图了)

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第1张图片


基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第2张图片

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第3张图片

项目工程

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第4张图片

准备一点一点分享,看啥时能写完,写完再分享源码工程(想要源码可以私聊)

第一章我们先来初步认识一下krpano,整个平台的核心实现,都是基于krpano这个全景引擎来完成的



第一次接触到krpano还是去年6月多那时候吧,第一眼看到全景漫游的时候觉得现在竟然可以做出这么酷炫的东西,当时还挺激动,接触之后发现原来还挺简单的,只需要学会krpano就可以了。

krpano是一个老外开发的全景引擎,基于浏览器对全景漫游进行浏览,它有一套自己xml语言,对全景漫游的制作编辑基本都是对xml文件进行修改的

http://krpano.com/          这是它的官网,关于它的中文资料还挺少,不过目前有一个中文资料站,用来入门还是很不错的

http://www.krpano360.com/             把里面的资料都看一遍,基本上就出师了

krpano到底怎么用呢?

首先,到官网去下载一个krpano,这里我选择下1.19版本

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第5张图片


然后打开安装文件,选择安装路径之后一路确定就好了

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第6张图片

装好之后就是这样的画面,到这一步基本也不会有什么问题

现在我们就可以开始krpano的第一步之旅了,它到底怎么用呢?

很简单,老外给我们设计了很多个自动生成脚本,windows下可以直接拖动全景图片或视频到bat脚本中自动生成全景漫游,linux或mac下需要调用命令生成(很无奈)

就像这样,把1.png这张图拖到MAKE VTOUR (MULTIRES) droplet.bat这个脚本文件里,就可以自动生成一个全景漫游了,就像这样


基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第7张图片


它就自动生成啦

当然这个自动生成是有条件限制的,必须是大小为2:1的图片,如果不是的话,需要输入一些参数才能生成,并且效果也不太好,如果没有全景图片的话,建议输入2,180这两个参数进行生成


基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第8张图片

生成的全景文件就在你选择的图片的目录下,文件夹默认叫vtour(可以在配置文件改,这些以后再说)


我们打开vtour文件夹,目录显示如下,这时候如果不想深究的话直接打开tour.html这个浏览器页面就可以开始全景漫游了,tour_editor.html是krpano引擎自带的编辑系统,可以对全景进行简单的自定义编辑(编辑功能简单,不细说了)

自动生成的全景漫游文件结构如下:

panos文件夹:对全景图片进行切片处理之后的存储文件夹(就是放图片的地方)

plugins文件夹:全景漫游的核心配置(通过flash的swf文件和xml配置)

skin文件夹:皮肤配置(我们打开全景漫游看到的页面就是通过这个文件夹里的xml文件进行配置设计的)

tour.xml:全景漫游的主xml配置文件,想修改全景漫游界面基本都是在这里改(krpano的全景制作全是基于它自己的一套xml语言)

tour.js和tour.swf:顾名思义,通过js调用flash的swf文件给用户进行全景浏览(有html5和flash两种方式,以后细说)

tour.html:打开它你就可以看到全景漫游了

tour_editor.html:全景漫游简单编辑

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第9张图片

打开tour.html就显示如下的全景漫游啦,这只是最简单的界面,可以上下左右720°切换视角,以及放大缩小和VR功能等等

基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎_第10张图片

krpano的初次体验到这里基本完成了,更多的东西下次再写吧,一步一步来。

你可能感兴趣的:(基于web的全景漫游自动生成加编辑平台的技术实现(一)----初识krpano引擎)