基于Web的2.5維校園地圖的設(shè)計與實現(xiàn)

張潞　司占軍

摘要：隨著數(shù)字城市建設(shè)的不斷推進，二三維電子地圖逐步成為校園信息化建設(shè)的重要組成部分。本設(shè)計旨在開發(fā)2.5維校園電子地圖，更真實的展現(xiàn)校園景觀，用于學(xué)校宣傳展示、校園布局介紹等方面。研究方法是以天津科技大學(xué)為例，首先根據(jù)校園地形信息生成二維地形圖，并進行底圖處理及區(qū)域劃分。再利用3ds Max實現(xiàn)三維虛擬場景，通過添加紋理及貼圖，按特定的俯視角度渲染生成2.5維的校園空間平面地圖。通過HTML和JavaScript語言對網(wǎng)頁進行制作并利用IIS發(fā)布，最終實現(xiàn)基于網(wǎng)頁的校園地圖。本設(shè)計利用虛擬現(xiàn)實技術(shù)展現(xiàn)出更加立體化、真實化的校園結(jié)構(gòu)，較三維地圖而言，具有簡單直觀、數(shù)據(jù)量小、后臺運行速度快的特點。此外，通過校園網(wǎng)快速瀏覽，為用戶提供了一個具有交互性的數(shù)字校園展示平臺。

關(guān)鍵詞：2.5維；校園地圖；三維建模；Web；IIS

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）02-0080-02

Abstract： With the continuous advance of digital city construction， two or three dimensional electronic map has gradually become an important part of campus information construction.This design is the production of a 2.5D campus electronic map system， it can show the more realistic campus landscape， and be used for school publicity show， information presentation etc. The research method is take a certain university as a case， first of all， according to the terrain information of campus it should generate 2D topographic map and plot processing and regional division. After that， it should produce 3D scene modeling and add texture and texture by 3ds Max. It need to generate 2.5D the campus space plane map with the particular view angle. Web pages uses HTML and JavaScript language and releases by IIS .With virtual reality technology， this design show campus structure more vivid. Compared with a 3D map， this design has the characteristics of simple and intuitive， less amount of data， faster background running speed. In addition， the user has interactive platform of a digital campus through the campus network.

Key words： 2.5 Dimensional （2.5D）； Digital Map； 3D modeling； Web； IIS

隨著計算機技術(shù)的進步和信息技術(shù)的發(fā)展，校園地圖展示形式也逐步過渡到數(shù)字化模式[1]。2.5維數(shù)字地圖不僅能夠展現(xiàn)三維數(shù)字地圖的逼真效果，有滿足了在現(xiàn)有的網(wǎng)絡(luò)環(huán)境下對三維地圖的快速瀏覽訪問，而且還能夠提供多方式、多方位的展現(xiàn)校園景觀，又可作校園規(guī)劃和管理的輔助工具，因此2.5維地圖具有較高的應(yīng)用價值[2]。

1 前期準備

制作該設(shè)計首先需要收集校園的相關(guān)資料，將平面的CAD圖進行處理整合。此外還需要針對實地場景進行拍攝紀錄，并且將照片進行處理，便于后期貼圖。由于校園建模較為復(fù)雜，而且已有的三維模型數(shù)據(jù)為全模，數(shù)據(jù)量巨大，因此不能將大面積的模型合并在一起渲染，需要對整體校園進行區(qū)域劃分。按照校園結(jié)構(gòu)分布以道路為邊界劃分為四個區(qū)域分別建模，如圖1。

2模型建立

該設(shè)計利用3ds Max軟件進行的三維模型的建立。該軟件采用了二維建模、幾何體建模、面片建模等建模技術(shù)，有效的實現(xiàn)虛擬校園場景中各個對象的三維模型的建立，并結(jié)合3ds Max的實例技術(shù)、紋理貼圖、外部引用等來提高場景建模速度，有效的降低整體場景文件的大小[3]。

2.1 地形地貌建模

地形地貌是搭建三維校園模型的基礎(chǔ)，本次設(shè)計中的地面通過網(wǎng)格構(gòu)建起伏框架，利用紋理映射的方法提高模型的還原度。利用3ds Max對道路、地表，進行建模，采用制作模型線條，使用擠出命令，利用真實場景圖片的貼圖從而完成整個地形地貌的搭建。

2.2 建筑物建模

首先根據(jù)CAD圖紙及之前對建筑樓體的了解確定建模的層次結(jié)構(gòu)，對于建筑物的建模主要利用了二維圖形和多邊形建模結(jié)合的方式，利用布爾運算命令，得到建模的窗體等形狀。

2.3 其他建模

為了能夠更加真實的表現(xiàn)虛擬環(huán)境，需要添加一些植物、校園標志性建筑。在3ds Max中利用Photoshop中處理過得植物鏤空貼圖來實現(xiàn)植物及植被的建模[4]。

3優(yōu)化模型及渲染

利用3ds Max實現(xiàn)了虛擬校園的三維場景后，還需要使用恰當?shù)姆椒▽?ds Max文件進行優(yōu)化，有助于降低文件大小，提高工作效率[3]。在渲染之前需要在場景中添加適當?shù)臒艄庖詫崿F(xiàn)自然光源的效果，添加攝像機使場景向右和向下分別旋轉(zhuǎn)45度后，保證校園模型能夠最大化的展現(xiàn)，最終通過渲染生成該地圖。

4后期美化

針對渲染生成的2.5維地圖進行后期處理，利用Photoshop軟件調(diào)節(jié)亮度，顏色等參數(shù)確保圖片以達到最佳呈現(xiàn)效果，并對整體場景進行美化處理并且根據(jù)以后此外針對地圖中的道路，樓宇等標志物添加文字標注，方便用戶直觀識別。

5網(wǎng)頁的制作及發(fā)布

利用HTML超文本標記語言、CSS樣式、JavaScript語言結(jié)合Dreamweaver工具制作網(wǎng)頁平臺。將生成的2.5維地圖載入至網(wǎng)頁制作，并設(shè)計網(wǎng)頁整體布局，利用編程語言現(xiàn)實網(wǎng)頁的功能，開發(fā)完成后，需要對它進行發(fā)布。本次設(shè)計利用IIS組件發(fā)布網(wǎng)站，其發(fā)布方式具有方便快捷、不用冗長繁雜的步驟、不用購買域名操作等優(yōu)點，圖2是最終的網(wǎng)頁效果圖。

6總結(jié)

2.5維地圖是結(jié)合信息化與網(wǎng)絡(luò)化的特點，通過校園網(wǎng)展示學(xué)校的整體景觀，從傳統(tǒng)校園展示拓展為數(shù)字化的在線校園展示平臺。該設(shè)計不僅可以最大程度的展現(xiàn)校園風(fēng)光及校園布局，還可以展現(xiàn)學(xué)院的相關(guān)信息。是校園展示和規(guī)劃的重要輔助工具，具有一定的應(yīng)用價值。

參考文獻：

[1] 張永梅. 基于地理信息系統(tǒng)的城市數(shù)字化地圖的研究與設(shè)計[D].太原：華北工學(xué)院，2002.

[2] 倪凱. 2.5維電子地圖的制作流程[J]. 科技創(chuàng)新導(dǎo)報，2013（16）：50.

[3] 何曉田. 基于3D MAX實現(xiàn)虛擬校園場景建模[J]. 電腦知識與技術(shù)，2011（22）：5365-5366.

[4] 黃婳. 基于3ds Max與VRP鏤空植物效果制作[J]. 現(xiàn)代計算機：專業(yè)版，2014（15）：38-41.