基于Web的虛擬校園展示系統(tǒng)的設(shè)計與實現(xiàn)

靳延安

湖北經(jīng)濟學(xué)院，湖北武漢 430205

0 引言

近年來，高校之間的生源競爭局面愈演愈烈，部分高校將甚至面臨關(guān)門危險。在這種生源競爭激烈的大環(huán)境下，學(xué)校除改革人才培養(yǎng)模式和方法，提高人才培養(yǎng)質(zhì)量外，還要重視對外的宣傳，基于Web的三維虛擬校園系統(tǒng)是充分利用Internet進行“不到?！毙麄鞯淖詈梅绞?。此外，現(xiàn)在的大學(xué)校園具有校園面積大、機構(gòu)眾多等特點，如何借助于現(xiàn)代信息技術(shù)提高學(xué)校各項工作的管理效率是非常值得考慮的問題。利用三維校園虛擬系統(tǒng)進行校園規(guī)劃，可以使管理者在虛擬三維環(huán)境中動態(tài)交互地對未來校園環(huán)境進行全面的審查，避免興師動眾實地考察。

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

1 系統(tǒng)設(shè)計

1.1 系統(tǒng)概述

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

1.2 用戶需求描述

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

1）一般瀏覽用戶功能。

（1）全實景瀏覽。

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

（2）搜索定位。

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

（3）導(dǎo)航功能。

系統(tǒng)提供熱點列表或者用戶搜索熱點功能，點擊相應(yīng)熱點單元，可以進行快速定位導(dǎo)航。

（4）分類熱點定位。

校園內(nèi)一般分布著眾多如銀行網(wǎng)點、ATM機、圈存機、超市等其他服務(wù)設(shè)施，分類熱點定位可以快速定位銀行網(wǎng)點、ATM機、圈存機、超市等基礎(chǔ)設(shè)施。

（5）鷹眼功能。

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

（6）測距功能。

（7）地圖控制。

放大、縮小，可以在網(wǎng)頁里用鼠標(biāo)任意查看三維地圖，包括4級縮放。 任意拖動，用鼠標(biāo)可以任意拖動三維地圖。

（8）熱點信息瀏覽。

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

2）系統(tǒng)管理功能。

（1）用戶權(quán)限管理。

系統(tǒng)后臺管理模塊提供權(quán)限管理功能，超級管理員有所有權(quán)限，并可分配熱點信息維護、區(qū)域標(biāo)注、點標(biāo)注及地圖管理等權(quán)限。

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

（2）區(qū)域標(biāo)注。

區(qū)域標(biāo)注主要針對大型建筑物的標(biāo)注操作。把鼠標(biāo)移到地圖上，通過鼠標(biāo)選定建筑物外圍即可標(biāo)注對應(yīng)建筑。

（3）區(qū)域標(biāo)注管理。

列表顯示區(qū)域標(biāo)注信息，可以進行區(qū)域標(biāo)注信息管理操作。

（4）點標(biāo)注。

點標(biāo)注主要針對建筑物內(nèi)部單位進行標(biāo)注操作。如：一個區(qū)域標(biāo)注的辦公樓里面包含的院系等，就可以用點標(biāo)注對該院辦進行標(biāo)注。對于多個單位要在同一點進行標(biāo)注時，可以定義優(yōu)先級。點標(biāo)注單位還可通過欄目導(dǎo)航及搜索功能來實現(xiàn)定位。

（5）點標(biāo)注管理。

列表顯示點標(biāo)注信息，可以進行點標(biāo)注信息管理操作。

1.3 系統(tǒng)功能設(shè)計

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

2 系統(tǒng)實現(xiàn)關(guān)鍵技術(shù)

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

2.1 建模階段

1）建筑物高度獲取。

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

2）校園場景建模。

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

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

3）模型優(yōu)化。

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

（1）創(chuàng)建模型時盡量采用標(biāo)準(zhǔn)幾何形狀。

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

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

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

2.2 交互階段

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

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

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

3 結(jié)論

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

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

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

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

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

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

[6]李會杰，李雅峰，何循來.基于虛擬現(xiàn)實技術(shù)的某型導(dǎo)彈仿真訓(xùn)練系統(tǒng)研究[J].系統(tǒng)仿真學(xué)報，2008，20（9）：2323-2325.

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