最近經歷了很多事情,感覺成長了很多,但是挺難受的,回來寫寫博客打發時間。
這次準備分享一個基於web的全景漫遊自動生成加編輯平臺的技術實現,採用技術如下
開發工具:myEclipse2014 Zend Studio Sublimetext3
前端:php+html+css+js+jquery
後臺:spring+struts2+hibernate + jython
數據庫:mysql
全景引擎:krpano
這是我們的主頁以及一鍵生成功能和編輯功能(以前做了個ppt,直接截裏面的圖了)
項目工程
準備一點一點分享,看啥時能寫完,寫完再分享源碼工程(想要源碼可以私聊)
第一章我們先來初步認識一下krpano,整個平臺的核心實現,都是基於krpano這個全景引擎來完成的
第一次接觸到krpano還是去年6月多那時候吧,第一眼看到全景漫遊的時候覺得現在竟然可以做出這麼酷炫的東西,當時還挺激動,接觸之後發現原來還挺簡單的,只需要學會krpano就可以了。
krpano是一個老外開發的全景引擎,基於瀏覽器對全景漫遊進行瀏覽,它有一套自己xml語言,對全景漫遊的製作編輯基本都是對xml文件進行修改的
http://krpano.com/ 這是它的官網,關於它的中文資料還挺少,不過目前有一箇中文資料站,用來入門還是很不錯的
http://www.krpano360.com/ 把裏面的資料都看一遍,基本上就出師了
krpano到底怎麼用呢?
首先,到官網去下載一個krpano,這裏我選擇下1.19版本
然後打開安裝文件,選擇安裝路徑之後一路確定就好了
裝好之後就是這樣的畫面,到這一步基本也不會有什麼問題
現在我們就可以開始krpano的第一步之旅了,它到底怎麼用呢?
很簡單,老外給我們設計了很多個自動生成腳本,windows下可以直接拖動全景圖片或視頻到bat腳本中自動生成全景漫遊,linux或mac下需要調用命令生成(很無奈)
就像這樣,把1.png這張圖拖到MAKE VTOUR (MULTIRES) droplet.bat這個腳本文件裏,就可以自動生成一個全景漫遊了,就像這樣
它就自動生成啦
當然這個自動生成是有條件限制的,必須是大小爲2:1的圖片,如果不是的話,需要輸入一些參數才能生成,並且效果也不太好,如果沒有全景圖片的話,建議輸入2,180這兩個參數進行生成
生成的全景文件就在你選擇的圖片的目錄下,文件夾默認叫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:全景漫遊簡單編輯
打開tour.html就顯示如下的全景漫遊啦,這只是最簡單的界面,可以上下左右720°切換視角,以及放大縮小和VR功能等等
krpano的初次體驗到這裏基本完成了,更多的東西下次再寫吧,一步一步來。