基於Krpano 的全景漫遊系統的實現

全景圖的播放原理是構建三維場 景·在場景中創 建柱體’或者球體'立方體等三維物體。將削做 好的全景照片做爲物體材
質貼在虛 擬的三維球體表面'或者將轉換過的6張1．1 的-照片貼在三維立方體表面。 將虛擬攝像機放置在球體或立方體的 體
心位置 鼠標拖動時轉動虛擬攝像機 或．者 轉動三雛體I以 此來實現奎景圖的 播放。對於漫遊的實現 經過特定位置添加熱。最
．薔擊熱點後進行切換場 景即切悽是三維球體表萄 貼圖來 實現：i ¨1 j 。。 。j j
360項目中 所使用的Krpano viewer是一款基於Flash的全景圖播放和漫遊軟件。 anoviewer的全部功能都是經過對其
l關聯的xnd文件的 解析來實現的謄其所捷供的各類插件也經過配置xH1l文件來調用。

一
、Krpano功能介紹
Krpano viewer的主程序所使用的XML文件十分簡潔．默認狀況下僅能夠作到場景的載入。其餘全部功能，都以插件的
形式實現．而每一個插件．既能夠在本身的XML文件進行配置。 而後供主程序XML文件調用．也能夠在主程序的XML文件
中直接b[<plugin>標籤引入並進行配置。這樣作的好處就是功
能明確，結構清晰，便於擴展，利於維護。
Krpano的全部標籤以下：
<inelude>標籤：載人其餘的xml文件。
<preview>標籤：在裝載全景圖片的過程當中顯示一個小的
全景圖。

<image>標籤：載人圖片。 
<view>標籤：存儲當前視的信息。 
<area>標籤：定義全景圖中被展現的區域 
<display>標籤：定義渲染的質量和性能。 
<control>標籤：鼠標鍵盤的控制設置。 
<cursois>標籤：自定義光標的樣式。 
<autorotate>標籤：當無用戶交互時．自動扭曲／移動，縮放。 
<plugin>標籤：載人其餘flash程序，圖片或者按鈕，圖標 
等。 
<hotspot>標籤：設置熱點。 
<events>標籤：設置事件的響應。 
<aetion>標籤：定義行爲．須要用腳本語言解釋器解釋。 
<eontextmenu>標籤：自定義鼠標右鍵菜單。 
<progress>標籤：設置裝載時過程。 
<network>標籤：設置下載或者decode時的圖片。 
<memory>標籤：設置內存使用狀況。 
<security>標籤：設置安全性。 
<textstyle>標籤：定義樣式。 
<lensflareset>標籤：定義一個鏡頭光暈樣式。 
<lensflare>標籤：定義一個鏡頭光暈。 
<data>標籤：存儲一些數據 
<scene>標籤：定義場景。

Krpano viewer的功能是十分強大和複雜的．本文只介紹
系統所用到的幾個比較重要的標籤
=、校園全景漫遊的具體實現
2．一、將krpano viewer嵌入html網頁
Krpa~o Viewer提供了swfkrpano．is腳本 使用它能夠很方
便地將krpano viewer嵌入html網頁．其使用方法以下：
首先引人腳本文件：<script src="swfkrpano．J⋯S><／script>
接着編寫iavascript腳本：

<script type=」text／javaseript」> 
vat swf=ereateswf(」krpano．swf'’，」krpanoSWFObject」，」 
100％」，」100％ 」)； 
swf．addVariable(」xml」，」scenes-with-imagemap．xml」)； 
swf．embed(」krpanoDIV」 ： 
swf．addVariable(」xml」，」krpano．xml」)； 
<／script>

此段代碼的說明爲：Var swf=ereateswf0表示能夠建立要
嵌入的對象
swf．addVariable0表示設置xml文件的路徑
swf．embed(」krpanoDIV」1表示將krpano viewer嵌入到html
元素裏。
2．二、設置初始場景
在配置文件中的根節 <krpano>中添加腳本動做．設置初
始要載人的場景
<kroano version=」1．0．8」onstart=」loadscene(scene1．null。
MERGE)；p1aysound(s1，sound／music．mp3，0，o)；」>
onstart爲Krpano定義的事件．其後跟隨的內容爲事件的
響應腳本。Loadscene函數表示載入場景．其第一參數爲場景名
稱。Playsound函數是音頻播放插件所提供。其第二個參數爲要
播放的音頻文件的路徑。
2-3構建各個場景
本系統全部的場景信息都保存在XML文件中。當須要載
人某個場景時，系統會查找相應的標籤，讀取配置。在XML配
置文件中．使用<scene>標籤構建場景。具體示例以下：
<scene name=」scenename」onstart=’。action(startscene)；」>
<scene>標籤後的name屬性是必須的，同時．做爲場景的
標識．其值必須是全局惟一的。onstart屬性後跟腳本動做代碼，
表示在場景剛載入時要作的工做。本例中，onstart屬性後爲一
個名爲startscene的動做 這個動做中包含一系列的腳本代碼
來完成一些工做，具體以下：

<action name=」startscene」> 
set(heading，90)； 
showtext([b】要顯示的字符 】，infostyle)； 
action(activatespot，scene3，190)； 
playsound(s1，sound／sound．mp3，0，o)； 
<／action>

每一個action的name屬性值同<scene>標籤的n踟e屬性一
樣，也是必需而且全局惟一的．其做用相似於C#語言中的方
149
法名．方便腳本編程時進行調用
在startscene這個動做中．首先設置了視角進入時的水平
位置。
在<scene>標籤之中，使用<image>標籤載人全景圖．其代
碼以下：
<image type=」SPHERE」><sphere url=」全景圖片路徑」／><
／image>
本方案使用的是球面全景圖，因此設置tvpe屬性爲
sphere。~<sphere>標籤中的ud屬性中設置要加載的全景圖片
的路徑
在每一個場景中都有若干熱點與相鄰場景進行互聯．點擊
熱點後能夠實現場景跳轉。要定義一個熱點．須要使用<
hotspot>標籤。與其餘標籤相似．在<hotspot>標籤中，也須要對
各個屬性進行設置
2_4設置地圖
在展現性項目中．導航地圖能夠使用戶方便地知道當前
場景的位置，是必不可少的。本項目導航地圖的實現．是在
krpano提供的插件功能和腳本編程語言基礎上自行實現的
地圖．以及地圖上的熱點，都是做爲插件存在的。它們的動態
特性．是經過腳本編程實現的。設置地圖的代碼以下：

<plugin name=」map」url=」scenes／map．JPg」keep 」true」 
align=」righttop」x=」一480」y=」0」alpha=」0．8」handeursor=」false’’ 
sealechildren=」true」width=」480」height=」360」／><plugin>

<plugin>標籤的url屬性設置要載入的地圖圖片的路徑。

X．v屬性設置地圖插件在屏幕上所出現的位置。alpha設置圖片的透明度。width與height屬性設置地圖插件的寬高。當場景跳轉時．若是跳轉後的場景與前一個場景位於同一地圖中．地圖不會變化．若是進入到了新的地圖場景中．地圖會自動更換 地圖顯示，也能夠隱藏，能夠經過點擊導航圖按鈕實現。

2．5設置地圖上的熱點
爲了標明系統全部場景在地圖上的位置和當前場景的位
置．須要使用地圖熱點。
每一個場景在地圖上具備對應的熱點標出 表明當前場景
的熱點，其圖標與其餘場景不一樣，以示區別。同時，點擊某個熱
點。也會跳轉到相應的場景中。
這些場景熱點也是經過插件方式實現的 每一個熱點都是
一個插件．經過設置插件屬性實現其各類功能．其配置以下：
<plugin name=」插件名」ur1=」插件所用圖片的地址」
keep=’’true」parent=’’map’’align=’’left」edge=’’center」x=」162’’
v：」495」z0rder：=」2」onhover="showtext(想要顯示的場景信息)I，
onclick=」loadscenefscenel，null，MERGE，BLEND(1))；／>
其中naine屬性設置插件名．這是一個全局惟一的名稱
url設定默認的供熱點使用的圖片的路徑。parent屬性設置插
件的父插件名稱
2．6設置按鈕
按鈕的做用．一般是點擊後出發事件．進而執行一系列的
動做。在krpano中，附帶有預約義的按鈕，能夠實現系統預約
義的功能。也能夠使用krpano強大的插件和腳步編程功能．白
定義按鈕
K_~pano預約義的按鈕主要包括：全屏，左轉，右轉，上轉，
下轉，全屏，鼠標樣式轉換。其功能的實現也是依靠腳本語句．．
這些預約義的功能被單獨寫在一個配置文件中．krpano的主
配置文件用<include>標籤包含這個配置 同時也要注意修改
相關的圖片路徑。使用方法以下：<include url="butt0n／buttons—
png—include．xml」／>。
在引用預約義的按鈕配置時．要注意預約義的配置文件
和配置文件所引用的文件的相對路徑．避免出現錯誤
在本項目中，除了使用預設的按鈕外，還須要兩個按鈕．
一個是聲音播放按鈕，一個是地圖顯示按鈕 採用krpano的插
件和腳步功能實現。聲音播放按鈕的代碼爲：
<plugin name=」sndl」url=」sound／soundonof．png」align=」
leftbottom」x=」10」y=」5」alpha=」0．6」scale=」1．0」keep=」true’’
onover=」tween(alpha，1)；」onout=」tween(alpha，0．6)；」crop=」0101501
50」onclick=」switch(soundinterface．mute)；switch(crop，010150150，
01501501501；」／>
Onclick屬性設置了關閉或者打開soundinterface插件 、默
認爲播放，當點擊後聲音中止，而且圖標改變爲關閉方式，再
次點擊，播放聲音，圖標變爲播放方式。Crop屬性的四個值：0l
0150150，表示在加載的圖片的0，0位置起，寬50高50裁切出一
個圖片，供當前使用。也就是說，能夠把好幾個圖標整合在一
張圖片上，使用時，調用Crop腳本函數，提供要切割的起始坐
標，要切割圖片的寬高。
地圖按鈕的代碼爲：
<plugin name=」showmap」keep=」true」url=」daohang．png」
visible=」true」align=」rightbottom」onclickA=」set(state，，A，)；tween
(plugin[map]．X，0％)；」oncliekB=」set(state,"B3；tween(plugin[map]．x，
一480)；」onclick=」if(state=：，A ，onclickB0，onclickA0)；」y=」5」／
>
參考文獻：
fl】趙慶展，趙欣，常靜．虛擬校園全景漫遊系統的實現[J]．石河
子大學學報，2006，f11
[2】鄔厚民．利用魚眼技術構建全景漫遊系統的方法探索『J1．電
腦知識與術．2009(18)
f31楊琳，趙建民，朱信忠，徐慧英，鄭國強．虛擬校園=三維全景
漫遊技術研究 計算機工程與科學，2007，(10)
150

須要軟件，或者全景交流的朋友能夠加羣 290188608 很久沒有來看博客，對於要軟件的朋友我會盡快發給大家的，也能夠加羣索取