虛擬商品三維展示的核心實現

[摘要] 對商品的三維網絡模型進行研究，探討了應用VRML建模語言實現在網絡上展示虛擬三維商品的方法，結合實例說明商品三維模型展示的實現步驟。解決了虛擬商品三維展示系統要解決的關鍵問題。

[關鍵詞] 虛擬現實 VRML 三維展示

一、引 言

虛擬商品三維展示系統，由服務器端和客戶端組成。服務器端由VRML文件、商品的查詢、管理和發布構成。客戶端包括Web瀏覽器和VRML瀏覽器插件兩部分。用戶通過Web瀏覽器完成網頁中三維商品的查看和操作。在實際開發中，含有三維模型的VRML文件往往是通過三維設計軟件制作得到。再通過三維軟件的導出功能，將三維模型導出為VRML文件。最后，編寫HTML程序將VRML腳本嵌入網頁之中，實現虛擬商品的發布。

二、虛擬商品的代碼處理

1.用戶視點的調整。打開三維軟件導出的VRML文件時，我們發現眼前一片漆黑或什么都看不到。這是由于用戶距虛擬場景中的物體距離太近的緣故，需要調整觀察者的視角。在VRML程序的前面，添加如下代碼可得到解決：

Viewpoint {

position0.0 0.0 500.0# 修改視點的位置

}

其中，position域的域值用于設置觀察視點在VRML場景中的空間位置，由一個X、Y、Z的三維坐標確定。在此，我們希望拉遠與虛擬場景中商品模型的距離，則加大Z軸的值。比如，將Z的默認值由10改為500。

2.模型材質的創建。對于導出的VRML文件，還會出現三維模型的材質紋理丟失的情況。這就需要對虛擬場景中的商品模型的紋理重新進行創建。VRML紋理映射使用Appearance節點的texture域或textureTransform域，對于復雜造型還可使用TextureCoordinate節點進行精確紋理映射，后者具有紋理坐標系變換功能。

例如，對于一個三維廣告牌模型，在VRML中為其添加圖像紋理如下。

Shape {

appearanceAppearance{

textureImageTexture{# 模型貼圖

url [“Guangao.jpg”]

}

}

geometry Box { # 廣告牌模型

size 3.0 4.0 0.04

}

}

3.多場景模型的組合。對于一個復雜的造型，往往將其分割成多個模型，再組合而成。即，建立獨立的場景造型文件，然后用VRML的內聯節點將其融合，從而簡化復雜造型的設計與調試，便于維護和多人開發。

例如，某臺燈模型由3個場景文件組成，主場景文件為lamp.wrl，燈罩場景文件為lamp-chimney.wrl，燈架場景文件為lamp-support.wrl。

燈罩場景文件關鍵代碼如下：

Shape {

appearance Appearance {

textureImageTexture {# 燈罩貼圖

url“tietu1.jpg”

}

}

geometry Extrusion { # 燈罩模型

crossSection [

1.00.0

0.924-0.383… …]… …

}

}

燈架場景文件關鍵代碼如下：

Shape {

appearance Appearance {

textureImageTexture {# 燈架貼圖

url“tietu2.jpg”

}

}

geometry Extrusion {# 燈架模型

crossSection [

1.00.0

0.924-0.383… …

]… …

}

}

主架場景文件關鍵代碼如下：

Transform {

translation0.0 1.3 0.0

children [

Inline {# 引入燈罩模型

url“lamp-chimney.wrl”

}

]

}

Transform {

translation0.0 -1.3 0.0

children [

Inline {# 引入燈架模型

url“lamp-support.wrl”

}

]

}

在VRML瀏覽器中得到的最終結果如下圖所示。

三、虛擬商品的發布

VRML嵌入網頁有多種方式。其一，可以在網頁中設置超鏈接，其目標即VRML文件。這種情況下，瀏覽器會為該VRML文件單獨打開一個窗口進行顯示。其二，在網頁中利用HTML語言的embeded元素來嵌入VRML文件。例如，

… …

… …

四、結束語

針對虛擬商品三維展示系統設計的實現進行研究。通過VRML實現用戶在二維網頁中查看三維商品模型。說明了虛擬場景中模型的創建方法，對導出的VRML所存在的問題進行了處理，實現了虛擬三維商品在網絡上的發布。

參考文獻：

[1]汪志達葉偉:VRML虛擬現實網頁設計[M].北京:清華大學出版社，2006

[2]趙小雨薛海燕:基于VRML的三維網站設計[J].甘肅科技，2008，(3)

[3]http://www.cortona3d.com，[EB/OL]