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

季 恒

(泰州師范高等專科學(xué)校，泰州 225300)

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

季 恒

(泰州師范高等專科學(xué)校，泰州 225300)

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

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

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

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

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

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

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

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

2.1 傳播媒介

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

2.2 傳播內(nèi)容

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

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

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

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

2.2.2 會(huì)展場(chǎng)館展示

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

2.2.3 虛擬場(chǎng)景

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

2.2.4 互動(dòng)視頻會(huì)議

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

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

2.3.1 Flash 技術(shù)

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

2.3.2 SVG 技術(shù)

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

2.3.3 VRML 技術(shù)

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

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

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

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

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

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

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

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

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

圖1 利用SketchUp快速建立展示平臺(tái)的模型

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

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

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

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

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

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

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

圖2 利用3DS MAX進(jìn)行二次編輯

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

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

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

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

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

5 結(jié)語(yǔ)

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

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

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

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

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

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

［6］柯育龍，趙彥靈.基于VRML和Java技術(shù)的三維虛擬校園漫游系統(tǒng)［J］.重慶工學(xué)院學(xué)報(bào)，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ù)庫(kù)應(yīng)用研究。

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