基于Krpano的校園全景漫游系統的實現

摘要：全景圖的播放原理是構建三維場景，在場景中創建柱體，或者球體，立方體等三維物體。將制作好的全景照片作為物體材質貼在虛擬的三維球體表面，或者將轉換過的6張1：1的照片貼在三維立方體表面。將虛擬攝像機放置在球體或立方體的體心位置。鼠標拖動時轉動虛擬攝像機，或者轉動三維體，以此來實現全景圖的播放。對于漫游的實現，通過特定位置添加熱點，點擊熱點后進行切換場景即切換三維球體表面貼圖來實現。

360項目中所使用的KrpanoViewer是一款基于Flash的全景圖播放和漫游軟件。Krpano Viewer的所有功能都是通過對其關聯的xml文件的解析來實現的。其所提供的各種插件也通過配置xml文件來調用。

關鍵詞：三維場景 Krpano 全景漫游 xml配置

一、Krpano功能介紹

Krpano viewer的主程序所使用的XML文件十分簡潔，默認情況下僅可以做到場景的載入。其他所有功能，都以插件的形式實現，而每個插件，既可以在自己的XML文件進行配置，然后供主程序XML文件調用，也可以在主程序的XML文件中直接以標簽引入并進行配置。這樣做的好處就是功能明確，結構清晰，便于擴展，利于維護。

Krpano的所有標簽如下：

標簽：載入其他的xml文件。

標簽：在裝載全景圖片的過程中顯示一個小的全景圖。

標簽：載入圖片。

標簽：存儲當前視的信息。

標簽：定義全景圖中被展示的區域。

標簽：定義渲染的質量和性能。

標簽：鼠標鍵盤的控制設置。

標簽：自定義光標的樣式。

標簽：當無用戶交互時，自動扭曲/移動/縮放。

標簽：載入其他flash程序，圖片或者按鈕，圖標等。

標簽：設置熱點。

標簽：設置事件的響應。

標簽：定義行為，需要用腳本語言解釋器解釋。

標簽：自定義鼠標右鍵菜單。

標簽：設置裝載時過程。

標簽：設置下載或者decode時的圖片。

標簽：設置內存使用情況。

標簽：設置安全性。

標簽：定義樣式。

標簽：定義一個鏡頭光暈樣式。

標簽：定義一個鏡頭光暈。

標簽：存儲一些數據。

標簽：定義場景。

Krpano viewer的功能是十分強大和復雜的，本文只介紹系統所用到的幾個比較重要的標簽。

二、校園全景漫游的具體實現

2.1、將krpano viewer嵌入html網頁

Krpano Viewer提供了swfkrpano.js腳本。使用它可以很方便地將krpano viewer嵌入html網頁，其使用方法如下：

首先引入腳本文件：

接著編寫javascript腳本：

此段代碼的說明為：var swf = createswf()表示可以創建要嵌入的對象。

swf.addVariable()表示設置xml文件的路徑。

swf.embed(\"krpanoDIV\")表示將krpano viewer嵌入到html元素里。

2.2、設置初始場景

在配置文件中的根節點中添加腳本動作，設置初始要載入的場景。

onstart為Krpano定義的事件，其后跟隨的內容為事件的響應腳本。Loadscene函數表示載入場景，其第一參數為場景名稱。Playsound函數是音頻播放插件所提供。其第二個參數為要播放的音頻文件的路徑。

2.3構建各個場景

本系統所有的場景信息都保存在XML文件中。當需要載入某個場景時，系統會查找相應的標簽，讀取配置。在XML配置文件中，使用標簽構建場景。具體示例如下：

標簽后的name屬性是必須的，同時，作為場景的標識，其值必須是全局唯一的。onstart屬性后跟腳本動作代碼，表示在場景剛載入時要做的工作。本例中，onstart屬性后為一個名為startscene的動作。這個動作中包含一系列的腳本代碼來完成一些工作，具體如下：

set(heading，90);

showtext([b]要顯示的字符[/b]， infostyle);

action(activatespot，scene3，190);

playsound(s1，sound/sound.mp3， 0，0);

每個action的name屬性值同標簽的name屬性一樣，也是必需并且全局唯一的，其作用類似于C#語言中的方法名，方便腳本編程時進行調用。

在startscene這個動作中，首先設置了視角進入時的水平位置。

在標簽之中，使用標簽載入全景圖，其代碼如下：

本方案使用的是球面全景圖，所以設置type屬性為sphere。在標簽中的url屬性中設置要加載的全景圖片的路徑。

在每個場景中都有若干熱點與相鄰場景進行互聯，點擊熱點后可以實現場景跳轉。要定義一個熱點，需要使用標簽。與其他標簽類似，在標簽中，也需要對各個屬性進行設置。

2.4設置地圖

在展示性項目中，導航地圖可以使用戶方便地知道當前場景的位置，是必不可少的。本項目導航地圖的實現，是在krpano提供的插件功能和腳本編程語言基礎上自行實現的。地圖，以及地圖上的熱點，都是作為插件存在的。它們的動態特性，是通過腳本編程實現的。設置地圖的代碼如下：

標簽的url屬性設置要載入的地圖圖片的路徑。X，y屬性設置地圖插件在屏幕上所出現的位置。alpha設置圖片的透明度。width與height屬性設置地圖插件的寬高。當場景跳轉時，如果跳轉后的場景與前一個場景位于同一地圖中，地圖不會變化，如果進入到了新的地圖場景中，地圖會自動更換。地圖顯示，也可以隱藏，可以通過點擊導航圖按鈕實現。

2.5設置地圖上的熱點

為了標明系統所有場景在地圖上的位置和當前場景的位置，需要使用地圖熱點。

每個場景在地圖上具有對應的熱點標出。代表當前場景的熱點，其圖標與其他場景不同，以示區別。同時，點擊某個熱點，也會跳轉到相應的場景中。

這些場景熱點也是通過插件方式實現的。每個熱點都是一個插件，通過設置插件屬性實現其各種功能，其配置如下：

其中name屬性設置插件名，這是一個全局唯一的名稱。url設定默認的供熱點使用的圖片的路徑。parent屬性設置插件的父插件名稱。

2.6設置按鈕

按鈕的作用，通常是點擊后出發事件，進而執行一系列的動作。在krpano中，附帶有預定義的按鈕，可以實現系統預定義的功能。也可以使用krpano強大的插件和腳步編程功能，自定義按鈕。

Krpano預定義的按鈕主要包括：全屏，左轉，右轉，上轉，下轉，全屏，鼠標樣式轉換。其功能的實現也是依靠腳本語句。這些預定義的功能被單獨寫在一個配置文件中，krpano的主配置文件用標簽包含這個配置。同時也要注意修改相關的圖片路徑。使用方法如下：。

在引用預定義的按鈕配置時，要注意預定義的配置文件和配置文件所引用的文件的相對路徑，避免出現錯誤。

在本項目中，除了使用預設的按鈕外，還需要兩個按鈕，一個是聲音播放按鈕，一個是地圖顯示按鈕。采用krpano的插件和腳步功能實現。聲音播放按鈕的代碼為：

Onclick屬性設置了關閉或者打開soundinterface插件。默認為播放，當點擊后聲音停止，并且圖標改變為關閉方式，再次點擊，播放聲音，圖標變為播放方式。Crop屬性的四個值：0|0|50|50，表示在加載的圖片的0，0位置起，寬50高50裁切出一個圖片，供當前使用。也就是說，可以把好幾個圖標整合在一張圖片上，使用時，調用crop腳本函數，提供要切割的起始坐標，要切割圖片的寬高。

地圖按鈕的代碼為：

參考文獻：

[1] 趙慶展，趙欣，常靜. 虛擬校園全景漫游系統的實現[J].石河子大學學報，2006，(1)

[2] 鄔厚民.利用魚眼技術構建全景漫游系統的方法探索[J].電腦知識與術， 2009（18）

[3] 楊琳，趙建民，朱信忠，徐慧英，鄭國強.虛擬校園三維全景漫游技術研究[J].計算機工程與科學，2007，(10)