陳燕紅 古麗米拉·克孜爾別克 謝衛(wèi)國 呂永杰

摘 要： 現(xiàn)代展示設(shè)計呈現(xiàn)出從靜態(tài)展示轉(zhuǎn)向動態(tài)呈現(xiàn)、從被動觀察轉(zhuǎn)向主動體驗、從現(xiàn)實空間擴展到虛擬空間的發(fā)展趨勢。為了順應(yīng)現(xiàn)代展示的發(fā)展趨勢，從數(shù)字化交互的角度出發(fā)，闡述基于實物三維模型、WebGL和HTML5的Web頁面三維動態(tài)展示技術(shù)，并基于此實現(xiàn)了新疆民族手工藝品三維動態(tài)展示系統(tǒng)，詳細介紹了實現(xiàn)該系統(tǒng)所涉及的關(guān)鍵問題。結(jié)果表明，用戶使用該系統(tǒng)可以從各個角度觀察物品，增強了用戶和產(chǎn)品間的互動以及直接觀察的真實感。

關(guān)鍵詞： WebGL； 動態(tài)網(wǎng)頁； 三維動態(tài)展示； 手工藝品； 交互設(shè)計； 虛擬現(xiàn)實技術(shù)

中圖分類號： TN911.73?34 文獻標識碼： A 文章編號： 1004?373X（2018）20?0024?04

Abstract： The modern display design has a development trend of turning from static display to dynamic presentation， from passive observation to active experience， and from real space to virtual space. Proceeding from the perspective of digital interaction， a Web page 3D dynamic display technology based on the physical 3D model， WebGL and HTML5 is elaborated， based on the technology， the 3D dynamic display system of Xinjiang ethnic handicrafts is implemented， and the key issues involved in the implementation of the system are discussed in detail， so as to comply with the development trend of modern display. The results show that the system can make users observe articles from various angles， which enhances the interaction between users and products and sense of reality of direct observation.

Keywords： WebGL； dynamic Web page； 3D dynamic display； handicraft； interactive design； virtual reality technology

0 引 言

目前，產(chǎn)品三維動態(tài)展示已成為現(xiàn)代工業(yè)設(shè)計體系中的重要組成部分，是一個多學(xué)科交叉的研究領(lǐng)域，在其發(fā)展的過程中受經(jīng)濟、科技、藝術(shù)水平的影響比較顯著。尤其是近年來體驗經(jīng)濟背景下，交互設(shè)計和虛擬現(xiàn)實技術(shù)的興起，現(xiàn)代展示設(shè)計呈現(xiàn)出從靜態(tài)展示轉(zhuǎn)向動態(tài)呈現(xiàn)、從被動觀察轉(zhuǎn)向主動體驗、從現(xiàn)實空間擴展到虛擬空間的發(fā)展趨勢。

本文從數(shù)字化交互的角度出發(fā)，研究基于實物三維模型、WebGL、動態(tài)網(wǎng)頁技術(shù)的Web頁面三維動態(tài)展示關(guān)鍵技術(shù)。文章詳細介紹了基于相關(guān)技術(shù)實現(xiàn)的新疆民族手工藝品三維動態(tài)展示系統(tǒng)。用戶使用該系統(tǒng)可以從各個角度觀察物品，增強了用戶和產(chǎn)品間的互動以及直接觀察的真實感。

1 三維動態(tài)展示技術(shù)的優(yōu)勢

隨著虛擬現(xiàn)實技術(shù)中三維展示技術(shù)的不斷發(fā)展，越來越多的行業(yè)開始應(yīng)用這種更加直觀真實的方式來對自己的公司以及產(chǎn)品進行宣傳。三維動態(tài)展示技術(shù)具有傳統(tǒng)宣傳方式所沒有的優(yōu)勢：

1） 操作方便。利用鼠標或鍵盤，可隨意控制瀏覽角度，隨心所欲地實現(xiàn)360°旋轉(zhuǎn)，上下左右、前后大小都可調(diào)節(jié)，讓用戶體驗身臨其境的奇妙感受，從而充分滿足用戶的觀賞需求。

2） 功能強大。質(zhì)量較高的三維全景攝影采用人機交互的多媒體界面和信息導(dǎo)航交互方式，再在這些展示中加上動畫、聲音等多媒體元素，打造全新的三維展示手法。

3） 身臨其境。三維模型展示，配合高精度圖片貼圖技術(shù)，多倍放大、圖像不失真、清晰明了、栩栩如生的展示對象，完整保留住場景的真實性，給客戶在各個角度、不同位置全面地展示出所有景致。

2 Web頁面三維展示核心技術(shù)

2.1 WebGL

WebGL是一種把JavaScript和OpenGL ES 結(jié)合在一起的3D繪圖標準。通過增加OpenGL ES 的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。這樣WebGL技術(shù)就免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可以實現(xiàn)在網(wǎng)頁中不用插件即可展示三維模型。WebGL完美地解決了現(xiàn)有的網(wǎng)頁交互式三維動畫的兩個重要問題：無需任何瀏覽器插件支持，通過HTML腳本本身即可實現(xiàn)網(wǎng)頁三維動畫交互的制作；用標準的、跨平臺的、統(tǒng)一的OpenGL接口實現(xiàn)了底層的圖形硬件加速功能進行的圖形渲染。

2.2 Three.js

JavaScript編寫的WebGL第三方庫Three.js是一款運行在瀏覽器中的3D引擎并且具有很多3D顯示功能。開發(fā)者可以用它創(chuàng)建包括攝影機、光影、材質(zhì)等各種對象的三維場景。Three.js雖然只是WebGL的第三方庫，但卻是支撐三維展示的脊梁。

1） 創(chuàng)建組件

在Three.js中用場景（scene）、相機（camera）和渲染器（renderer）這三個組件就能把需要展示的物體渲染到網(wǎng)頁中。場景就相當于容器，所有開發(fā)者要展示的物品都要放到場景中。相機決定了在場景的哪一個角度把物品展示出來，就如同人的眼睛一樣，在不同的角度看到的東西自然不同。渲染器決定渲染結(jié)果應(yīng)該畫在頁面的哪個元素上、怎樣去畫、用什么方式去畫。這三者的關(guān)系其實就是，場景存放物體，相機拍場景，取一個合適的角度將實物拍下來，然后渲染器把相機拍下的景傳到瀏覽器上顯示。創(chuàng)建三個組件的代碼如下：

var scene = new THREE.Scene（）；

var camera = new THREE.PerspectiveCamera（75，

window.innerWidth/window.innerHeight， 0.1， 1 000）；

var renderer = new THREE.WebGLRenderer（）；

創(chuàng)建場景相機和渲染器，設(shè)置渲染器的大小為窗口的內(nèi)寬度，也就是內(nèi)容區(qū)的寬度：

renderer.setSize（window.innerWidth， window.innerHeight）；

document.body.appendChild（renderer.domElement）；

2） 添加物體到場景

場景、相機和渲染器創(chuàng)建完成后就可以添加實物模型到場景中。如要將一個幾何體加入到場景中，代碼如下：

var geometry = new THREE.CubeGeometry（1，1，1）；

var material = new THREE.MeshBasicMaterial（{color： 0x00ff00}）；

var cube = new THREE.Mesh（geometry， material）；

scene.add（cube）；

3） 場景渲染

添加完實物模型后就剩下最后一步渲染了。渲染就是使用渲染器結(jié)合相機和場景來展現(xiàn)需要展示的物品的畫面，核心代碼為：

render（ scene， camera， renderTarget， forceClear ）

其中，renderTarget為渲染的目標，默認是渲染到前面定義的render變量中；forceClear在每次繪制之前都將畫布的內(nèi)容清除，即讓自動清除標志autoClear為false。

3 系統(tǒng)實現(xiàn)

本文基于三維動態(tài)展示技術(shù)實現(xiàn)了新疆民族手工藝品三維動態(tài)展示系統(tǒng)。系統(tǒng)主要功能有產(chǎn)品縮略圖展示、產(chǎn)品三維動態(tài)展示以及后臺各類信息管理等。下面主要介紹系統(tǒng)實現(xiàn)過程中涉及到的關(guān)鍵問題。

3.1 技術(shù)方案

新疆民族手工藝品三維動態(tài)展示系統(tǒng)主要分為前臺平面展示縮略圖、三維動態(tài)展示和后臺系統(tǒng)管理三個部分。系統(tǒng)使用的主要開發(fā)工具和主要技術(shù)有3ds MAX，WebGL，JSP語言以及MySQL數(shù)據(jù)庫。具體技術(shù)方案如下：

1） 實物三維建模是三維動態(tài)展示技術(shù)中很重要的技術(shù)環(huán)節(jié)。目前，實物三維建模方法主要有三種：利用三維軟件建模、通過儀器設(shè)備測量建模、利用圖像或者視頻來建模。

2） 基于WebGL技術(shù)和動態(tài)網(wǎng)頁技術(shù)構(gòu)建軟件系統(tǒng)。

3） 利用Three.js技術(shù)嵌入三維實物模型。

4） 對系統(tǒng)進行調(diào)試，并完善系統(tǒng)的設(shè)計。

3.2 三維模型嵌入Web頁面

在Web頁面三維動態(tài)展示中，三維實物模型構(gòu)建是非常重要的步驟。直接選擇用三維掃描儀來掃描所要展示的實物，然后用3D制圖軟件建立產(chǎn)品的三維模型，如圖1所示。并通過Photoshop軟件進行后期的制圖，將做好的圖片留作模型貼圖，如圖2所示。最后，利用WebGL技術(shù)將渲染好的三維實物模型（見圖3）嵌入Web頁面。

3.3 產(chǎn)品三維動態(tài)展示

系統(tǒng)將所有實物三維模型整理到一起進行產(chǎn)品分類展示并提供縮略圖展示，如圖4所示。用戶單擊某個模型的縮略圖后，會打開三維動態(tài)展示頁面。在該頁面中，用戶可以隨意控制瀏覽角度，隨心所欲地進行上下、左右、前后、大小調(diào)節(jié)，從而體驗身臨其境的奇妙感受，如圖5所示。

4 結(jié) 論

本文基于數(shù)字化模型并結(jié)合交互設(shè)計和虛擬現(xiàn)實技術(shù)，闡述了Web頁面三維動態(tài)展示關(guān)鍵技術(shù)，介紹了實現(xiàn)新疆民族手工藝品三維動態(tài)展示系統(tǒng)的技術(shù)要點。但該系統(tǒng)還無法滿足實際應(yīng)用要求。在后續(xù)研究中，結(jié)合虛擬現(xiàn)實技術(shù)，進一步完善系統(tǒng)三維展示效果。同時，系統(tǒng)將增加手機APP客戶端，從而方便用戶隨時隨地體驗真實的三維動態(tài)展示。雖然該系統(tǒng)的應(yīng)用和推廣還面臨很多問題和困難，但它的優(yōu)勢和應(yīng)用前景十分樂觀。該系統(tǒng)能讓一個從未到過新疆的出游者身臨其境地感受新疆各民族手工藝品的特色與文化魅力。

參考文獻

[1] 魏書寒，孫麒.基于HTML5和WebGL的三維智慧社區(qū)管理系統(tǒng)的設(shè)計與研究[J].工業(yè)控制計算機，2017，30（5）：139?140.

WEI Shuhan， SUN Qi. 3D intelligent community management system based on HTML5 and WebGL [J]. Industrial control computer， 2017， 30（5）： 139?140.

[2] 霍冬，鄭偉華，盛步云.基于WebGL的機械產(chǎn)品三維展示技術(shù)研究[J].制造業(yè)自動化，2013，35（18）：73?77.

HUO Dong， ZHENG Weihua， SHENG Buyun. A research of mechanical products′ 3D display technology based on WebGL [J]. Manufacturing automation， 2013， 35（18）： 73?77.

[3] 張玄，黃蔚.3D機房運維可視化系統(tǒng)的設(shè)計與實現(xiàn)[J].軟件，2016，37（7）：89?93.

ZHANG Xuan， HUANG Wei. Design and implementation of 3D data room operation and maintenance visualization system [J]. Computer engineering & software， 2016， 37（7）： 89?93.

[4] 劉愛華，韓勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息，2012，10（5）：79?81.

LIU Aihua， HAN Yong， ZHANG Xiaolei， et al. Research and implementation of network 3D visualization based on WebGL technology [J]. Geospatial information， 2012， 10（5）： 79?81.

[5] 鄭華，宿景芳.面向Web的三維模型生成與處理技術(shù)[J].現(xiàn)代電子技術(shù)，2015，38（24）：83?86.

ZHENG Hua， SU Jingfang. Web?oriented 3D model generation and processing technology [J]. Modern electronics technique， 2015， 38（24）： 83?86.

[6] 王磊，高玨，金野，等.基于Web3D無插件的三維模型展示的研究[J].計算機技術(shù)與發(fā)展，2015，25（4）：217?220.

WANG Lei， GAO Jue， JIN Ye， et al. Research on three?dimensional model display based on Web3D without plug?in [J]. Computer technology and development， 2015， 25（4）： 217?220.

[7] 陳滔滔，江曉宇，溫佩賢，等.基于Web3D的人臉模型定制系統(tǒng)[J].系統(tǒng)仿真學(xué)報，2014，26（2）：382?388.

CHEN Taotao， JIANG Xiaoyu， WEN Peixian， et al. Face model customization system based on Web3D [J]. Journal of system simulation， 2014， 26（2）： 382?388.

[8] 方路平，李國鵬，洪文杰，等.基于WebGL的醫(yī)學(xué)圖像三維可視化研究[J].計算機系統(tǒng)應(yīng)用，2013，22（9）：25?30.

FANG Luping， LI Guopeng， HONG Wenjie， et al. 3D visualization of medical images based on WebGL [J]. Computer systems & applications， 2013， 22（9）： 25?30.

[9] 羅懷榮，石軍鋒.基于WebGL 3D技術(shù)的可視化溫室環(huán)境監(jiān)測系統(tǒng)設(shè)計[J].江蘇農(nóng)業(yè)科學(xué)，2017，45（7）：189?192.

LUO Huairong， SHI Junfeng. Design of visual greenhouse environment monitoring system based on WebGL 3D technology [J]. Jiangsu agricultural sciences， 2017， 45（7）： 189?192.

[10] 吳志強，祝忠明，劉巍，等.機構(gòu)知識庫三維模型檢索與展示技術(shù)研究與實踐[J].數(shù)據(jù)分析與知識發(fā)現(xiàn)，2017，1（1）：73?80.

WU Zhiqiang， ZHU Zhongming， LIU Wei， et al. Retrieving 3D models from institutional repository [J]. Data analysis and knowledge discovery， 2017， 1（1）： 73?80.