基于Web的虛擬校園展示系統的設計與實現

靳延安

湖北經濟學院，湖北武漢 430205

0 引言

近年來，高校之間的生源競爭局面愈演愈烈，部分高校將甚至面臨關門危險。在這種生源競爭激烈的大環境下，學校除改革人才培養模式和方法，提高人才培養質量外，還要重視對外的宣傳，基于Web的三維虛擬校園系統是充分利用Internet進行“不到校”宣傳的最好方式。此外，現在的大學校園具有校園面積大、機構眾多等特點，如何借助于現代信息技術提高學校各項工作的管理效率是非常值得考慮的問題。利用三維校園虛擬系統進行校園規劃，可以使管理者在虛擬三維環境中動態交互地對未來校園環境進行全面的審查，避免興師動眾實地考察。

本文通過對某學校三維虛擬校園的分析與設計，借助于Google Map提供的免費高精度二維影像數據，利用SketchUp軟件和JavaScript腳本技術、Ajax技術及Note.js技術實現了一個三維虛擬校園系統，該系統可以進行三維校園場景漫游、校園各類信息查詢、校園規劃審查等功能。

1 系統設計

1.1 系統概述

為了使用戶能夠身臨其境地感知校園風貌及方便游覽，該系統通過以下四個方面來表現虛擬校園：第一，根據學校真實的自然風貌對包括各類建筑物、景點、道路、運動場、湖等校園內各個對象進行1∶1建模。第二，考慮加入一些學生、花草樹木和汽車等模型來加強真實感。通過文字、圖片等富媒體技術手段加以輔助，達到介紹校園的目的。第三，為了方便用戶漫游，加強用戶與場景的交互，系統實現了鷹眼地圖功能以及漫游功能。第四，為使瀏覽者能順利地漫游虛擬校園，系統還實現了建筑信息查詢等交互功能。系統提供深度利用地圖數據的接口以數字校園中其他子系統使用。

1.2 用戶需求描述

通過用戶面談、問卷調查等多種形式，歷時2個月完成了用戶的需求分析，具體的用戶需求描述如下。

1）一般瀏覽用戶功能。

（1）全實景瀏覽。

系統提供自動漫游功能，或由用戶交互漫游校園三維全景，用戶可以隨時結束瀏覽。

（2）搜索定位。

通過關鍵詞搜索或者分類查詢，可以快速定位到要查看的地點，也可通過控制條或直接在地圖上拖曳進行三維校園地圖的快速瀏覽。當鼠標停留在相關建筑物時，可以高亮顯示建筑物及其名稱。

（3）導航功能。

系統提供熱點列表或者用戶搜索熱點功能，點擊相應熱點單元，可以進行快速定位導航。

（4）分類熱點定位。

校園內一般分布著眾多如銀行網點、ATM機、圈存機、超市等其他服務設施，分類熱點定位可以快速定位銀行網點、ATM機、圈存機、超市等基礎設施。

（5）鷹眼功能。

通過三維校園右下角的鷹眼地圖，用戶清楚了解整個校園及當前瀏覽位置，同時可以在鷹眼地圖上快速定位導航。

（6）測距功能。

（7）地圖控制。

放大、縮小，可以在網頁里用鼠標任意查看三維地圖，包括4級縮放。 任意拖動，用鼠標可以任意拖動三維地圖。

（8）熱點信息瀏覽。

可以通過點擊地圖熱點上的氣泡瀏覽對應熱點信息。比如介紹圖書館基本情況、館藏分布等信息。

2）系統管理功能。

（1）用戶權限管理。

系統后臺管理模塊提供權限管理功能，超級管理員有所有權限，并可分配熱點信息維護、區域標注、點標注及地圖管理等權限。

其他拍攝對象的反饋也是相似的。他們公開表示，威特金對待他們是充滿人道關懷的，說到他是如何使他們成為藝術作品的表現對象，且將作品充滿尊嚴地呈現在公眾面前，而這與這個社會將他們掩蓋起來、邊緣化是完全相反的。實際上，在威特金的攝影作品里，缺陷本身具有一種形而上的力量。“殘疾、畸形、卑賤與那些使人顫栗的東西，被帶回聚光燈下。”（杰勒馬諾·切蘭特）

（2）區域標注。

區域標注主要針對大型建筑物的標注操作。把鼠標移到地圖上，通過鼠標選定建筑物外圍即可標注對應建筑。

（3）區域標注管理。

列表顯示區域標注信息，可以進行區域標注信息管理操作。

（4）點標注。

點標注主要針對建筑物內部單位進行標注操作。如：一個區域標注的辦公樓里面包含的院系等，就可以用點標注對該院辦進行標注。對于多個單位要在同一點進行標注時，可以定義優先級。點標注單位還可通過欄目導航及搜索功能來實現定位。

（5）點標注管理。

列表顯示點標注信息，可以進行點標注信息管理操作。

1.3 系統功能設計

通過對用戶的需求進行分析，結合數字校園擴展等要求，本系統要完成如圖1所示前臺用戶功能和如圖2所示后臺管理功能。

2 系統實現關鍵技術

本系統在真實校園的基礎上進行構建。因此，系統設計開發主要分兩個階段：建模階段和交互階段。建模階段主要有兩個工作：一是收集規劃圖、平面圖以及各類設施圖片等等資料，二是利用SketchUp依據實際尺寸和樣式建模，然后對模型進行UV貼圖和材質烘焙；交互階段主要指利用JavaScript腳本技術、Ajax技術及Note.js等技術對建模階段產生的三維模型實現交互功能包括虛擬對象的交互以及數據的查詢等。

2.1 建模階段

1）建筑物高度獲取。

由于建筑圖紙缺失，建筑物高度數據是本系統進行三維場景建模時遇到的巨大障礙，尤其是要快速獲取眾多建筑的高度參數是亟待解決的問題。本文通過以下方法來獲取建筑物高度：首先通過獲取Google Earth二維影像拍攝的時間模擬太陽在空中的位置，這樣使得已經建立的三維模型產生陰影；然后通過調整三維模型的高度使模型所產生的陰影與二維影像的陰影完全重合，重合之后三維模型的高度即為建筑物的真實高度。建筑物高度信息獲取流程如圖3所示。

2）校園場景建模。

虛擬校園的真實感和使用感受與三維模型建模質量有很大關系。在模型創建過程中，既需要保證模型質量滿足真實感要求，同時也需要確保模型加載速度不能太慢。

由于現實環境中的建筑較多，為有效地完成模型的創建，建模時對建筑的結構和外觀進行分類，對于結構相同的建筑可以重復使用同一個模型，減輕工作量；對于較復雜的建筑可以對其拆分，理清結構再進行建模。除了建筑之外，還需要對外部場景如樹木、路燈、花壇、座椅及特色景觀、天空等進行建模。

3）模型優化。

由于虛擬校園場景涉及的模型很多，大量復雜的模型會嚴重影響到系統的交互速度。因此，在整個創建過程中必須應堅持以下原則。

（1）創建模型時盡量采用標準幾何形狀。

（2）細長條的物體如欄桿、柵欄等采用面片和貼圖方式實現，不要做成模型。

（3）校園中的樹木綠化采用面片的十字交叉法模擬即可。

（4）對多余的冗余面進行刪除。

2.2 交互階段

交互階段在建模階段生成的地圖上實現三維虛擬校園的各種交互功能。建模的地圖分為兩層：地圖層和數據層。地圖層用于加載地圖圖片，處于底層。地圖圖片的顯示根據精細度劃分成多個級別，不同的級別對地圖進行了不同程度的分割。地圖圖片根據顯示區域的變化進行動態加載。數據層用于顯示地圖信息。數據層是由各興趣點的標記數據構成。興趣點分為點標記標記信息和區域信息，兩類興趣點主要區別在于地理位置信息的表示方法。點信息標記（如圈存機）通過單坐標點實現，區域信息標記（如某一棟建筑物）通過區域的一組邊界點的坐標實現。

標記數據以JSON的格式存儲在數據庫中。位置是以點型標記存儲。建筑物是以多邊形標記來存儲，默認無邊框和填充顏色，當標記被覆蓋時添加邊框和填充顏色。地圖加載時讀取所有的數據信息。

由于三維虛擬校園系統中三維場景加載對客戶端計算機要求較高，所以整個系統使用Note.js來搭建。Note.js使用了一些最新的編譯技術，使得用Javascript腳本語言編寫出來的代碼運行速度獲得極大提升。另外，Note.js可以快速構建網絡服務及應用的平臺，可以編寫出可擴展性高的服務器。系統主界面如圖4所示。

3 結論

本文利用JavaScript腳本技術、Ajax技術及Note.js技術實現了一個具有交互功能的三維虛擬校園系統。實現的三維虛擬校園系統已經正式投入使用，系統使用起到了口碑宣傳、校園指引、網絡宣傳等作用，得到了用戶的高度評價。另外，該系統還可為校園規劃和管理提供最直觀的表現形式，為數字校園建設提供很好的基礎服務。

[1]徐杰.基于3Ds Max三維虛擬校園的設計與實現[J].中國管理信息化，2012，15（17）：122-123.

[2]安潔玉，程朋根，丁斌芬.基于Google Earth二維影像獲取建筑物高度的方法[J].地理與地理信息科學，2010，26（6）：31-33.

[3]張瑞菊.SketchUp結合Google Earth在虛擬校園中的應用[J].計算機應用，2013（1）：271-272，279.

[4]任宏萍，周犇.基于Virtools的虛擬校園在線交互設計與實現[J].計算機工程與科學，2011，33（11）：117-121.

[5]李海軍，劉霄，何鐵寧.虛擬維修系統交互控制方法研究[J].計算機仿真，2010，27（9）：281-285.

[6]李會杰，李雅峰，何循來.基于虛擬現實技術的某型導彈仿真訓練系統研究[J].系統仿真學報，2008，20（9）：2323-2325.

[7]歐陽攀，李強，盧秀慧.基于Unity3D的虛擬校園開發研究與實現[J].現代電子技術，2013，36（4）：19-22.