基于網(wǎng)絡(luò)的產(chǎn)品虛擬展示系統(tǒng)設(shè)計與研究

1、基于網(wǎng)絡(luò)的產(chǎn)品虛擬展示系統(tǒng)設(shè)計與研究（ 1 西安理工大學(xué)藝術(shù)與設(shè)計學(xué)院陜西西安710054,2 西安交通大學(xué)機械學(xué)院陜西西安710049 ）摘要： 隨著網(wǎng)絡(luò)的迅速普及，基于網(wǎng)絡(luò)的產(chǎn)品虛擬展示技術(shù)也在快速發(fā)展。本文以面向用戶需求的冰箱造型設(shè)計為基礎(chǔ)，利用cult3D軟件和 3Dmax軟件的集成，提出了基于網(wǎng)絡(luò)的冰箱產(chǎn)品虛擬展示系統(tǒng)，主要探討了展示系統(tǒng)中的四大關(guān)鍵技術(shù)建模技術(shù)、模型轉(zhuǎn)換、交互設(shè)計和系統(tǒng)發(fā)布。關(guān)鍵詞：面向用戶需求; 品虛擬展示 ; Cult3D;交互設(shè)計The design and research of products virtual display system based o

2、n network Abstract: With the rapid popularization of Internet, network-based products virtual display technology is also developing rapidly. Based on refrigerator appearance design, using theintegration of Cutl3D and 3Dmax softwares, this paper proposes a virtual display system of refrigerators base

3、d on networks.This paper also mainly discusses the four key technologies ofthe display system,which are Modeling Technology,Model Transformation,Interaction Design and System Release.Key words:User-oriented requirements; Products virtual display; Cult3D; Interaction design1 引言交互式三維虛擬展示系統(tǒng)是致力于解決企業(yè)與消費者

4、之間的產(chǎn)品信息問題，通過搭建一個跨越時空局限性的交流互動平臺，讓消費者及時全面地了解和掌握企業(yè)的產(chǎn)品信息，幫助企業(yè)充分展示和推廣產(chǎn)品 1 。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，虛擬展示技術(shù)在產(chǎn)品的網(wǎng)絡(luò)展示中愈來愈受到重視。如何將商業(yè)產(chǎn)品逼真地在網(wǎng)絡(luò)中表現(xiàn)出來，將企業(yè)的產(chǎn)品信息用三維的技術(shù)發(fā)布到網(wǎng)絡(luò)中并準確地傳遞給消費著，已經(jīng)成為當前網(wǎng)絡(luò)展示的切實需求2 。本文以面向用戶需求的冰箱造型設(shè)計為基礎(chǔ)，提出冰箱產(chǎn)品的虛擬展示系統(tǒng)，主要探討基于網(wǎng)絡(luò)的交互式虛擬展示系統(tǒng)的關(guān)鍵技術(shù)。2 面向用戶需求的冰箱造型設(shè)計為了能夠更好的把握住消費者的需求，從工業(yè)設(shè)計的角度對冰箱的造型進行了有針對性的調(diào)研。2.1 針對工業(yè)設(shè)計信息的市

5、場調(diào)研在冰箱的調(diào)研中主要是針對工業(yè)設(shè)計信息的問卷調(diào)研，從問卷的設(shè)計（人機、色彩、結(jié)構(gòu)等）到問卷的數(shù)據(jù)分析（統(tǒng)計分析、相關(guān)性分析和趨勢分析）， 堅持從工業(yè)設(shè)計的角度出發(fā)，所構(gòu)建的調(diào)研系統(tǒng)分為 8 大子模塊，形態(tài)設(shè)計評價、造型風格評價、色彩設(shè)計評價、材料選擇評價、操作環(huán)境評價、結(jié)構(gòu)功能分析、人機界面評價、綜合效果評價，以形成有助于冰箱設(shè)計的需求分析報告。問卷以各種方式發(fā)放、回收問卷，通過SPSS進行描述性數(shù)據(jù)分析，以獲得可信度相對較高的需求調(diào)研結(jié)果。并且，以訪問法、調(diào)查法為主對海爾以及各大家電賣場進行實地調(diào)研（如圖1-1 ）。面向用戶需求的調(diào)研系統(tǒng)問卷調(diào)研實地考察2009 年西安理工大學(xué)研究生學(xué)術(shù)

6、年會2.2 冰箱的造型設(shè)計訪郵電集抽海專電銷入問寄話會樣爾賣器售戶法法調(diào)調(diào)調(diào)工店商員調(diào)根據(jù)調(diào)研結(jié)果的描述性統(tǒng)計分析，總結(jié)出查查查業(yè)場面查法法法園談冰箱設(shè)計的趨勢： 冰箱內(nèi)部空間急需增加蔬菜豎直放置區(qū)、菜碟分層擱置架，所占比例為25.6%和 24%；未來冰箱的新功能應(yīng)該具備飲水機、菜譜、吧臺、聽音樂，選擇飲水機的百分比最高，為68.3%；材料的選擇中消費者更傾向于鏡面和金屬質(zhì)感，各占26%和 24%；冰箱的操控方式選擇最多的為觸摸式，占 45.9%；八大 主模 塊形造材操人色綜結(jié)態(tài)型料作機彩合構(gòu)設(shè)風選環(huán)界設(shè)效功計格擇境面計果能評評評評評評評評價價價價價價價價圖 1-1 冰箱的調(diào)研系統(tǒng)Fig 1-

7、1 The Research System of Refrigerator外觀顏色占百分比最多的為銀灰和白色系列，各占 34.1%和 33.8%；冰箱的形態(tài)以選擇兩門的居多，占 37%；造型風格多選擇現(xiàn)代簡約，占 53.3%。通過調(diào)研與冰箱前沿信息資料的總結(jié)，歸納出了冰箱設(shè)計的整體發(fā)展趨勢：經(jīng)濟效果的節(jié)能化、多件合一的廚房化、方便需要的小型化、儲量升級的大型化、精細生活的多門多溫化、種種用途的多功能化、自動控制的智能化、冰箱面板的藝術(shù)化等。通過對冰箱調(diào)研的總結(jié)和SPSS數(shù)據(jù)分析，明確冰箱造型的設(shè)計方向。首先進行多款冰箱造型的草圖繪制；其次是方案的篩選，確定幾款能夠滿足用戶需求的方案；最后是冰箱

8、的建模和渲染，最終完成面向用戶需求的冰箱造型設(shè)計。3 冰箱產(chǎn)品虛擬展示系統(tǒng)的關(guān)鍵技術(shù)研究為了能夠更好的向消費者展示冰箱產(chǎn)品，推廣新的產(chǎn)品造型，采用基于網(wǎng)絡(luò)的虛擬展示成為一個最佳的選擇。虛擬展示系統(tǒng)的完成，是一個較為復(fù)雜的設(shè)計過程，其關(guān)鍵技術(shù)主要包括虛擬模型的建立、展示技術(shù)、基于網(wǎng)絡(luò)的交互設(shè)計和系統(tǒng)整合，主要涉及的軟件有 Cult 3D 、 Java Script 、Dreamweaver、3DMAX、Rhinoceros 等，其中 Cult3D 軟件包括了三部分 Cult3D Exporter 、Cult3D Designer 、Cult3D Viewerplugin 。冰箱虛擬展示系統(tǒng)的開發(fā)

9、過程大致分為四個部分，總結(jié)開發(fā)流程如圖2-1 所示：建模模型轉(zhuǎn)換交互設(shè)計系統(tǒng)的發(fā)布 建模 優(yōu)化模型 基本交互 網(wǎng)頁開發(fā) 材質(zhì) 指定軸 高級交互 交互設(shè)計3.1 虛擬模型的建立與模型轉(zhuǎn)換 動畫所有的建模有著不同的應(yīng)用領(lǐng)域軟件，虛擬展示環(huán)境下的仿真模型要解決兩個關(guān)鍵問題，即模型轉(zhuǎn)換和幾何模型的建立，現(xiàn)在比較成熟的如圖 2-1 Cult3D 開發(fā)流程3。在實Solidworks 、UG、Pro E、CATIA 等，主要面向制造業(yè)Fig2-1 Cult3D Development Process際應(yīng)用中， 3DS MAX是擁有較廣泛的用戶群，同時對硬件要求較低，因此在一般情況下應(yīng)用較多，其他軟件的 3

10、D 數(shù)字模型可通過軟件本身自帶的導(dǎo)出接口，導(dǎo)出適合3D MAX的的格式 3 。在 3DS MAX中建立多款冰箱模型后，進行模型的渲染，優(yōu)化冰箱的模型，并為冰箱門設(shè)定旋轉(zhuǎn)軸等，以便模型適合于Cult3D 的22009 年西安理工大學(xué)研究生學(xué)術(shù)年會交互設(shè)計。在 3DS MAX中需要安裝Cult3D Exporter插件導(dǎo)出模型，然后保存為*.C3D 。 Cult3D Exporter是模型轉(zhuǎn)換的插件，模型轉(zhuǎn)換時Cult3D Exporter的附加功能主要有：優(yōu)化模型、設(shè)置背景和版權(quán)信息等。3.2 虛擬模型的交互展示技術(shù)冰箱虛擬模型的交互性主要通過Cult3D Designer來實現(xiàn)，它是Cult3

11、D 的設(shè)計制作工具，也是最主要的部分。 Cult3D 賦予三維場景 / 物體的交互性在于它能接收內(nèi)部和外部產(chǎn)生的事件，引發(fā)設(shè)定的操作4 。Cult3D 能接收的事件類型主要包括：world start、worldstop 、 worldstep 、 timer 、 leftmouse clickon object 、keyboard'skey press 等。通過自定義事件，用于特定情況下由其它事件激發(fā)或瀏覽器外部事件激發(fā)。3.2.1基本交互Cult3D最基本的交互性可以使用Cult3D Designer中已預(yù)先設(shè)置的多種響應(yīng)行為如事件(Event) 和行為 (Action)，分別針對

12、場景中的各種基本對象，也包括產(chǎn)生各種特效的特殊行為，如粒子系統(tǒng)、3D 場景漫游等 5 。在 Cu1t3D Designer 中直接賦予相應(yīng)的元素節(jié)點，這些元素節(jié)點包括導(dǎo)入的三維模型對象本身以及其附屬的貼圖、材質(zhì)，還包括場景中的其它基本組成元素，如：文本、聲音、攝像機等。在Cult3DDesigner的事件圖 (Event Map) 中其事件、對象以及行為在事件圖中構(gòu)成了網(wǎng)狀的組織關(guān)聯(lián)結(jié)構(gòu)，如圖2-2 所示。圖 2-2 Cult3D 中基本交互Fig2-2 The Basic Interaction of Cult3D在基本交互設(shè)計中，主要包括了三個部分，其內(nèi)容在圖2-2 的右圖中基本能夠體現(xiàn)。

13、第一部分是激活與旋轉(zhuǎn)軌跡，是指一個事件world start、個動作Arcball和對象的交互；第二部分是自動旋轉(zhuǎn)對象，是指事件world start、Rotation XYZ和對象的簡單交互，也是在3D對象下載完畢后馬上激活的事件，便于用戶在不執(zhí)行操作時觀看對象；第三部分是一些輔助功能，例如聲音、文字跟蹤等，通過Cult3D 中的 Sound、 Tooltips等功能很容易實現(xiàn)。32009 年西安理工大學(xué)研究生學(xué)術(shù)年會3.2.2高級交互對于設(shè)計一個較為復(fù)雜的展示系統(tǒng)來說，預(yù)設(shè)的基本行為也就越復(fù)雜，以實現(xiàn)物體的各種交互功能。事件、對象以及行為在事件圖中構(gòu)成了網(wǎng)狀的復(fù)雜的組織關(guān)聯(lián)結(jié)構(gòu)，網(wǎng)絡(luò)的入口

14、為觸發(fā)世界響應(yīng)的若干事件，包括鼠標和鍵盤的觸發(fā)以及定時器的激活，還可以設(shè)置自定義的事件用于與外界程序相交互，以控制對象狀態(tài)、外觀等。圖 2-3 Cult3D 中的高級交互Fig2-3 The Advanced Interaction of Cult3D在圖 2-3 中可以清晰的看到Obojects與 Event 中復(fù)雜的關(guān)聯(lián)結(jié)構(gòu)，高級交互主要包括了冰箱開關(guān)門的響應(yīng)和整體的旋轉(zhuǎn)控制，通過Rotation XYX來實現(xiàn)；鎖定攝像頭，通過Camera 來實現(xiàn)；顏色變換，通過Hotspot 或 Hide/Unhide World實現(xiàn)等。3.3Java 級的交互對于一個更為復(fù)雜的展示系統(tǒng)的設(shè)計任務(wù)來說，

15、需要加入更加復(fù)雜的交互，預(yù)設(shè)的基本行為對參數(shù)控制就不夠靈活了。制作后期愈加復(fù)雜的網(wǎng)絡(luò)布局使設(shè)計工作變得困難。因此，Cult3D中實現(xiàn)交互性能的另一手段是借助 Java 語言來創(chuàng)建高級的交互行為，以控制對象狀態(tài)、外觀或操縱其運行6 ，過程如圖 2-4 所示。模型設(shè)計Java 級的交互是通過Cult3D API ( ApplicationCult3D DesignerProgramming Interface)開發(fā)程序， 利用 JavaScript進行編譯 6。用戶不但可以隨意地用鼠標托拽對象，還可以根據(jù)設(shè)定 （如按鍵）從不同角度真實地了解到產(chǎn)品的外形、顏色和功能，甚至更換產(chǎn)EventsActio

16、nCult3DObojects4EventsActionObojects2009 年西安理工大學(xué)研究生學(xué)術(shù)年會品的顏色、 紋理，甚至將其組合或拆分，大大豐富了三維瀏覽時的交互效果。以冰箱外觀更換色彩為例，在 Java 的腳本文件中，編譯生成Cult3D 可使用的 class文件，其編碼如下：privateColorred=new Color(200， 10， 10) ；圖 2-4 Java 級的交互Fig2-4 The Interaction of JavaprivateColorblue=new Color(100， 100， 200) ；private Colorgreen=new Col

17、or(100， 200，100) ；pirvateColorblack=new Color(50， 50， 50) ；privateColorcolors=red，blue ，greenblack3.4 冰箱虛擬展示系統(tǒng)的發(fā)布Cult3D 應(yīng)用較廣，在多個領(lǐng)域中都有較好的表現(xiàn)，其最大的優(yōu)點就是做產(chǎn)品展示，它可以應(yīng)用到有多種軟件中，最常見的是網(wǎng)絡(luò)應(yīng)用，同時也可以應(yīng)用于微軟Office軟件及 Adobe 的 Acrobat 、Reader 軟件中，還可以在多媒體制作軟件Authorware和 Director制作的光盤中離線發(fā)布4 。本文中的冰箱虛擬展示系統(tǒng)是發(fā)布于網(wǎng)絡(luò)中。3.4.1基于 WEB的

18、用戶界面開發(fā)網(wǎng)絡(luò)界面的設(shè)計藝術(shù)是研究人機關(guān)系的一門新興學(xué)科，它反映著人機之間的信息交流，其本質(zhì)是人與人的交流，而人與人的交流必然是雙向的，互動的7 。所以，“人機”中的“機”( 界面 ) 作為交流的主體，所扮演的角色必需具有人的特征，界面設(shè)計的“人性化”成為必然。使網(wǎng)絡(luò)界面設(shè)計具有“人性化”的特點，必須合理調(diào)配審美、環(huán)境文化、心理、價值觀念等各因素的關(guān)系，使其達到和諧、統(tǒng)一，可以把網(wǎng)絡(luò)界面的“人性化”理解為：賞心、悅目、傳情、達意7 。本文根據(jù)以上WEB界面設(shè)計原則和互動虛擬展示的特點，冰箱虛擬展示系統(tǒng)的界面設(shè)計以“人性化”為主要出發(fā)點，設(shè)計出適合人機之間信息交流的操作界面如圖2-5 所示。3

19、.4.2展示鏈接在展示系統(tǒng)的操作平臺中，主要包括兩部分鏈接：展示模型的鏈接、按鈕與Cult3D 事件的鏈接。展示模型的鏈接，首先將預(yù)設(shè)的交互模型在Cult3D 中通過 Cult3D Viewer plugin導(dǎo)出為 HTML格式，之后通過 Dreamweaver 將其嵌入到操作界面中，但是嵌入后只能通過鼠標和鍵盤直接對產(chǎn)品進行操作，初次52009 年西安理工大學(xué)研究生學(xué)術(shù)年會接觸的人并不容易操作8 。通過界面中的按鈕操作，相對來說更容易些。 按鈕與 Cult3D 事件的鏈接， 是通過 JavaScript和 HTML實現(xiàn)的。 Cult3D 設(shè)計的響應(yīng)事件不能直接嵌入到網(wǎng)頁中，需要JavaScr

20、ipt編程后嵌入到HTML中，才能實現(xiàn)產(chǎn)品的交互性。以冰箱的旋轉(zhuǎn)為例，JavaScript的編程語言如下：function triggerReset()var success = Cult3D.triggerEvent("reset");if (!success)alert("Error couldnt find the event StopReset");function triggerStopt()var success = Cult3D.triggerEvent("ice");if (!success)alert("Error couldnt find the event StopRotation");3.4.3冰箱虛擬展示系統(tǒng)的整合面向用戶需求的六款冰箱建模渲染和界面開發(fā)完成之后，依次對冰箱進行模型轉(zhuǎn)換、交互設(shè)計、交互展示和JavaScript編程等，最終完成基于網(wǎng)絡(luò)的交互式冰箱虛擬展示系統(tǒng)開發(fā)如圖2-5 。用戶通過界面中的按鈕和提示進行操作，也可以直接通過鼠標對冰箱產(chǎn)生互動響應(yīng)，讓消費者能夠在這個虛擬環(huán)境下，對冰箱進行旋轉(zhuǎn)、開關(guān)門、換色、換材質(zhì)等。企業(yè)通過該系統(tǒng)展示新產(chǎn)品，能使消費者有親臨現(xiàn)場的感受，通過網(wǎng)絡(luò)足不出戶就能非常全面地了解冰箱，并可