季 恒

(泰州師范高等?？茖W(xué)校，泰州 225300)

互動媒體技術(shù)在三維網(wǎng)頁設(shè)計中的應(yīng)用

季 恒

(泰州師范高等?？茖W(xué)校，泰州 225300)

伴隨網(wǎng)絡(luò)技術(shù)及藝術(shù)設(shè)計的發(fā)展，互動媒體已經(jīng)成為網(wǎng)絡(luò)媒體藝術(shù)的主要發(fā)展方向。網(wǎng)頁設(shè)計是視覺傳達的載體，三維立體網(wǎng)頁設(shè)計能多視角真實展示宣傳對象，在三維網(wǎng)頁設(shè)計中引入互動媒體技術(shù)對提升三維立體網(wǎng)頁的藝術(shù)特征和信息傳遞，能達到事半功倍的效果。

三維網(wǎng)頁設(shè)計;互動媒體技術(shù);VRML

網(wǎng)絡(luò)帶寬在國內(nèi)電信運營商的服務(wù)下日益提升，啟動了數(shù)據(jù)傳輸?shù)母锩＞W(wǎng)頁設(shè)計不再純粹依賴于文字、圖片、音效和視頻傳遞信息，訪問者瀏覽網(wǎng)頁的習(xí)慣正逐漸由線性模式演變?yōu)榻换コ掷m(xù)模式，推陳出新的技術(shù)豐富了網(wǎng)頁的表現(xiàn)力，滿足了瀏覽者的視覺需求，讓他們更傾向于訪問三維網(wǎng)站。

互動媒體技術(shù)的誕生，為三維網(wǎng)頁設(shè)計開啟了新的發(fā)展動力和方向，軟硬件技術(shù)的發(fā)展為此提供了技術(shù)保障，便攜式上網(wǎng)工具則為互動提供了廣大的訪問途徑。

1 三維網(wǎng)頁設(shè)計與互動媒體技術(shù)的發(fā)展現(xiàn)狀

高速網(wǎng)絡(luò)時代，網(wǎng)頁設(shè)計在能承載的信息傳遞方式正發(fā)生著巨大的變革，互動媒體技術(shù)自提出概念之后，正逐漸由理論變成實踐，繼而開始流行。技術(shù)的發(fā)展離不開市場的需求，市場的需求也正大力推進網(wǎng)頁設(shè)計走入互動媒體時代。品牌傳播不再依賴于平面化的網(wǎng)頁設(shè)計，多元化的傳播正逐漸成為主流，互動媒體技術(shù)作為新媒體依賴網(wǎng)絡(luò)的發(fā)展方向，正展現(xiàn)出其未來發(fā)展趨勢。

基于互動媒體技術(shù)的三維網(wǎng)站，猶如一張網(wǎng)絡(luò)名片，起到了宣傳和展示功效。當(dāng)前采用互動媒體技術(shù)的網(wǎng)站主要包括宣傳、展示和游戲幾個方向，通過大量建模生成虛擬現(xiàn)實場景，從而達到廣告宣傳、虛擬現(xiàn)實、互動展示和游戲體驗。

2 三維網(wǎng)頁設(shè)計與互動媒體技術(shù)結(jié)合的基礎(chǔ)

2.1 傳播媒介

計算機及其網(wǎng)絡(luò)技術(shù)是網(wǎng)頁設(shè)計的信息傳播的重要媒介。憑借互聯(lián)網(wǎng)的高速發(fā)展，建立于互聯(lián)網(wǎng)的網(wǎng)站，一方面為瀏覽者提供了訪問信息平臺，另一方面也為網(wǎng)站的互動解決了空間、時間因素。3G及WIFI技術(shù)的成熟與普及，打破了PC作為網(wǎng)站的唯一訪問終端的歷史，智能手機與平板電腦作為新生終端，標(biāo)志著網(wǎng)站全民訪問時代的到來，為基于互動媒體技術(shù)的網(wǎng)頁設(shè)計提供了充足的受眾。

2.2 傳播內(nèi)容

網(wǎng)頁內(nèi)容是網(wǎng)頁設(shè)計所傳達的信息，如企業(yè)類網(wǎng)站主要包括公司的團隊結(jié)構(gòu)、經(jīng)營理念、產(chǎn)品功能宣傳、網(wǎng)絡(luò)咨詢與售后服務(wù)等。采用互動媒體技術(shù)的網(wǎng)頁設(shè)計一般重視用戶體驗，網(wǎng)站在和用戶的交互過程中傳遞產(chǎn)品性能，感受企業(yè)文化。隨著三網(wǎng)融合的加速，傳播的內(nèi)容將突破平面化的宣傳而變得更加豐富多彩，動畫及視頻等流量較大的信息能更加多維化的起到信息傳遞作用，海量信息傳遞在云端服務(wù)的管理下也變得更加流暢。

基于互動媒體技術(shù)的網(wǎng)站應(yīng)用范圍較廣，主要包括企業(yè)產(chǎn)品展示、會展展示、虛擬場景、互動視頻等。

2.2.1 企業(yè)產(chǎn)品展示

產(chǎn)品是企業(yè)的生存之本，通過互動性展示企業(yè)產(chǎn)品，能增強瀏覽者的真實感。如運動品牌耐克，其網(wǎng)站采用了虛擬現(xiàn)實的互動效果，從不同角度可以觀看耐克產(chǎn)品的實際效果

2.2.2 會展場館展示

基于WEB的三維會展展示，在上海世博會得到了大力推廣，中國館、城市足跡館和城市未來館等場館的全方位多角度的視覺效果，讓訪問者坐在電腦前即可瀏覽場館精彩內(nèi)部。

2.2.3 虛擬場景

虛擬校園是虛擬場景應(yīng)用的典型案例，基于VRML的校園，實現(xiàn)了校園數(shù)字化建設(shè)，繼而又逐漸推動了虛擬城市等數(shù)字工程的建設(shè)，可以預(yù)見的是未來WEB虛擬社區(qū)將逐步由二維轉(zhuǎn)換為三維。

2.2.4 互動視頻會議

高速3G和WIFI技術(shù)，讓視頻通話及會議變得更為互動，互動視頻網(wǎng)站的建設(shè)在提供基本視頻通話的基礎(chǔ)上，可以完成文件分發(fā)、修改等功能，還可以實時錄制會議過程。

2.3 三維立體網(wǎng)頁設(shè)計中可采用互動媒體技術(shù)比較

2.3.1 Flash 技術(shù)

Flash是由Macromedia公司推出的交互式矢量圖和網(wǎng)頁動畫標(biāo)準(zhǔn)，憑借其出色的表現(xiàn)和創(chuàng)作方式占據(jù)網(wǎng)頁互動媒體時代時間較長。但Flash所推出的SWF是一種非開放標(biāo)準(zhǔn)，可編輯性能較差，在數(shù)據(jù)變更迅猛的網(wǎng)絡(luò)時代，SWF的每一次變更都需要借助Flash重新發(fā)布，但是良好的應(yīng)用和創(chuàng)作能力讓Flash依舊保持足夠的發(fā)展勢頭。在三維表現(xiàn)方面，F(xiàn)lash通過精確控制場景中點的位移構(gòu)建三維空間，幾乎可以達到以假亂真的效果，但這是一種偽三維技術(shù)，在未來三維網(wǎng)頁的發(fā)展趨勢中，F(xiàn)lash難免有被淘汰的可能。

2.3.2 SVG 技術(shù)

SVG可縮放矢量圖形(Scalable Vector Graphics)，由W3C制定的基于可擴展標(biāo)記語言(XML)來描述二維矢量圖型的一個開放格式標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，通過使用文本格式的描述性語言來描述圖像內(nèi)容，因此SVG是一種和圖像分辨率無關(guān)的矢量圖形格式。其基于XML及交互和動態(tài)的特性，在移動終端上及二維場景的顯示應(yīng)用相對較多，它比Flash有絕對的優(yōu)勢，但在三維顯示技術(shù)上則顯得力不從心。

2.3.3 VRML 技術(shù)

VRML虛擬現(xiàn)實造型語言(Virtual Reality Modeling Language)被稱為繼HTML之后的第二代Web語言，它本身是一種建模語言，可以用來描述三維物體及其行為的，可以構(gòu)建虛擬世界，可以集成文本、圖像、音響、MPEG影像等多種媒體類型，還可以內(nèi)嵌用JavaScript等語言編寫的程序代碼。VRML的基本目標(biāo)是建立因特網(wǎng)上的交互式三維多媒體，基本特征包括分布式、三維、交互性、多媒體集成、虛擬逼真性等。

VRML技術(shù)在虛擬現(xiàn)實展示中表現(xiàn)出色，具有很廣泛的應(yīng)用性和穩(wěn)定性，相對其他技術(shù)比較適合在三維場景的網(wǎng)頁設(shè)計中實現(xiàn)互動技術(shù)。

移動終端CPU、內(nèi)存和圖形處理能力的增強，3G技術(shù)的成熟，4G技術(shù)正試點運行，VRML技術(shù)插件的不斷開發(fā)，未來三維網(wǎng)頁的軟硬件平臺正一步一步的構(gòu)建中。

3 基于VRML的互動媒體技術(shù)在網(wǎng)頁設(shè)計中的實踐探索

3.1 通過SketchUp創(chuàng)建三維立體模型

SketchUp是Google公司推出的快速三維建模軟件，操作簡單且直觀。SketchUp Pro是針對專業(yè)人士設(shè)計的3D建模軟件，在三維網(wǎng)頁項目的建設(shè)過程中，通過與客戶的溝通交流，利用SketchUp Pro構(gòu)建3D模型，能有利正確表現(xiàn)客戶需求，從而做出正確決策，整體上來講也傳達了項目細(xì)節(jié)，便于項目組成員在開發(fā)過程中與客戶分享意見，促進項目進展。同時，SketchUp Pro支持輸出2D元素和3D模型的混合，便于進行數(shù)字演示，通過適當(dāng)修改，這部分內(nèi)容也可以作為三維網(wǎng)頁內(nèi)容的補充部分。

以展示行業(yè)的三維立體網(wǎng)頁設(shè)計為例，在SketchUp中運用基本形狀和推拉技術(shù)，快速構(gòu)建展示平臺，并進行適當(dāng)?shù)馁N圖。如圖1所示的展示設(shè)計，制作過程中通過在頂視圖中繪制基本平面圖形:矩形和圓形，切換到等角透視通過推拉實現(xiàn)二維轉(zhuǎn)換三維的效果，制作過程也可以輸入精確值，作到和真實場景1:1的效果。

3.2 在3DS MAX中設(shè)置VRML 節(jié)點

SketchUp軟件的優(yōu)越性在于其兼容性較高，支持導(dǎo)出3DS MAX格式文件，從而保證能在3DS MAX中進行二次編輯，加入VRML節(jié)點提升展示的互動效果。

圖1 利用SketchUp快速建立展示平臺的模型

3DS MAX提供可導(dǎo)出節(jié)點有12個，主要用到的節(jié)點有:

(1)Anchor:訪問者瀏覽到錨點對象時，在未點擊鼠標(biāo)的情況下，會得到提示信息，類似于二維網(wǎng)頁中的鏈接提示設(shè)置功能。

(2)VRML Inline:提供了鏈接到外部VRML文件功能。

(3)Prox Sensor:當(dāng)訪問者步入、離開或漫游在某個方形區(qū)域內(nèi)時產(chǎn)生事件觸發(fā)，

(4)Level OF Detail:提供了展示內(nèi)容的顯示層次，當(dāng)距離目標(biāo)越近的時候，目標(biāo)越清晰，遠(yuǎn)離目標(biāo)時則目標(biāo)變模糊。

(4)Touch Sensor:對鼠標(biāo)等定點輸入設(shè)備進行偵測，判斷訪問者正在互動訪問的目標(biāo)，從而給出及時響應(yīng)。

此外還有對背景音樂、時間設(shè)置的節(jié)點等，合理運用以上節(jié)點能實現(xiàn)瀏覽者在三維網(wǎng)頁中的互動行為。如圖2所示，在SketchUp在建模后導(dǎo)入3DS MAX二次編輯后導(dǎo)出WRL格式文件。

圖2 利用3DS MAX進行二次編輯

3.3 編輯VRML文件完成WEB發(fā)布

VRML提供了50多個節(jié)點，其文件類型是一種純ASCII文件，可以通過記事本打開編輯。若網(wǎng)絡(luò)傳輸中VRML與HTML的鏈接能增強動態(tài)交互功能，通過非標(biāo)準(zhǔn)＜EMBED＞標(biāo)記可以實現(xiàn)VRML文檔嵌入HTML中。對于數(shù)據(jù)量較大的三維模型數(shù)據(jù)，建議通過裝有插件的瀏覽器打開并運行查看，當(dāng)前SGI公司的Cosmo Player插件和SONY的Community Place Browser插件功能強大，能流暢向瀏覽者展示三維立體效果。

4 互動媒體技術(shù)在三維網(wǎng)頁設(shè)計中的發(fā)展前景

從上個世紀(jì)90年代開始，網(wǎng)絡(luò)飛速發(fā)展的觸角已經(jīng)延伸到了我們生活的方方面面，網(wǎng)頁從最初的純文字模式，發(fā)展到現(xiàn)在的全媒體模式，網(wǎng)頁所承載的信息已經(jīng)涵蓋了我們生活的全部，虛擬社會的運行也正逐步從二維形式轉(zhuǎn)移到三維形式。新技術(shù)源源不斷的誕生，讓網(wǎng)頁設(shè)計成為了時尚和潮流領(lǐng)跑者和宣傳者。

未來互動媒體技術(shù)軟硬件的可持續(xù)發(fā)展，足以讓訪問者帶上眼睛像觀看3D電影一樣瀏覽網(wǎng)頁，訪問相隔千里的博物館和展覽館等;可以注重虛擬體驗，和服裝、家裝等行業(yè)結(jié)合，做到真正互動的產(chǎn)品訪問和產(chǎn)品體驗。

5 結(jié)語

基于互動媒體技術(shù)的三維網(wǎng)頁能實現(xiàn)目標(biāo)產(chǎn)品的虛擬再現(xiàn)，其設(shè)計綜合了計算機、藝術(shù)和心理等多學(xué)科，對訪問者來說瀏覽中有別于傳統(tǒng)二維網(wǎng)頁的互動體驗是一種視覺和心理的完美結(jié)合，屬于當(dāng)前互動式三維網(wǎng)頁發(fā)展的研究熱點。

［1］張彥翔.互動媒體系統(tǒng)平臺軟件發(fā)展趨勢分析［J］.電信技術(shù)，2011(5):56－28.

［2］趙熙，朱海辰.網(wǎng)頁設(shè)計［M］.杭州:浙江人民美術(shù)出版社，2010.

［3］謝曉昱.數(shù)字藝術(shù)導(dǎo)論［M］.南京:江蘇科學(xué)技術(shù)出版社，2009.

［4］曾峻峰，戈祖國.園林設(shè)計中虛擬現(xiàn)實技術(shù)的選擇及應(yīng)用［J］.長江大學(xué)學(xué)報:自然科學(xué)版，2008，5(4):25－28.

［5］宋琦，段建軍，於輝.虛擬現(xiàn)實技術(shù)在建筑設(shè)計和小區(qū)規(guī)劃設(shè)計中的應(yīng)用［J］.東華大學(xué)學(xué)報:自然科學(xué)版，2006，32(5):94－97.

［6］柯育龍，趙彥靈.基于VRML和Java技術(shù)的三維虛擬校園漫游系統(tǒng)［J］.重慶工學(xué)院學(xué)報，2005，12(1):39－43.

Application of Interactive Media Technology in Three-Dimensional Web Design

JI Heng

(Taizhou Teachers College，Taizhou 225300，China)

With the development of network technology and art design，interactive media has become the main development direction of network media art.Web design is a carrier of visual communication，three-dimensional web design shows multi-angle and real objects，the introduction of interactive media technology in three-dimensional web design can get twice the result with half the effort to enhance the art features and information transmission.

three-dimensional web design;interactive media;VRML

TP393.092.2

A

1009－3907(2012)06－0665－04

2012-03-23

季恒(1978-)，男，江蘇泰興人，講師，碩士，主要從事多媒體技術(shù)及數(shù)據(jù)庫應(yīng)用研究。

責(zé)任編輯:吳旭云