Web頁面三維動(dòng)態(tài)展示技術(shù)研究與應(yīng)用

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

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

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

中圖分類號(hào)： TN911.73?34 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 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)品三維動(dòng)態(tài)展示已成為現(xiàn)代工業(yè)設(shè)計(jì)體系中的重要組成部分，是一個(gè)多學(xué)科交叉的研究領(lǐng)域，在其發(fā)展的過程中受經(jīng)濟(jì)、科技、藝術(shù)水平的影響比較顯著。尤其是近年來體驗(yàn)經(jīng)濟(jì)背景下，交互設(shè)計(jì)和虛擬現(xiàn)實(shí)技術(shù)的興起，現(xiàn)代展示設(shè)計(jì)呈現(xiàn)出從靜態(tài)展示轉(zhuǎn)向動(dòng)態(tài)呈現(xiàn)、從被動(dòng)觀察轉(zhuǎn)向主動(dòng)體驗(yàn)、從現(xiàn)實(shí)空間擴(kuò)展到虛擬空間的發(fā)展趨勢(shì)。

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

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

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

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

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

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

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

2.1 WebGL

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

2.2 Three.js

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

1） 創(chuàng)建組件

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

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)建場(chǎng)景相機(jī)和渲染器，設(shè)置渲染器的大小為窗口的內(nèi)寬度，也就是內(nèi)容區(qū)的寬度：

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

document.body.appendChild（renderer.domElement）；

2） 添加物體到場(chǎng)景

場(chǎng)景、相機(jī)和渲染器創(chuàng)建完成后就可以添加實(shí)物模型到場(chǎng)景中。如要將一個(gè)幾何體加入到場(chǎ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） 場(chǎng)景渲染

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

render（ scene， camera， renderTarget， forceClear ）

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

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

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

3.1 技術(shù)方案

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

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

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

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

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

3.2 三維模型嵌入Web頁面

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

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

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

4 結(jié) 論

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

參考文獻(xiàn)

[1] 魏書寒，孫麒.基于HTML5和WebGL的三維智慧社區(qū)管理系統(tǒng)的設(shè)計(jì)與研究[J].工業(yè)控制計(jì)算機(jī)，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的機(jī)械產(chǎn)品三維展示技術(shù)研究[J].制造業(yè)自動(dòng)化，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機(jī)房運(yùn)維可視化系統(tǒng)的設(shè)計(jì)與實(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ò)三維可視化研究與實(shí)現(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].計(jì)算機(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é)報(bào)，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] 方路平，李國(guó)鵬，洪文杰，等.基于WebGL的醫(yī)學(xué)圖像三維可視化研究[J].計(jì)算機(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)測(cè)系統(tǒng)設(shè)計(jì)[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] 吳志強(qiáng)，祝忠明，劉巍，等.機(jī)構(gòu)知識(shí)庫三維模型檢索與展示技術(shù)研究與實(shí)踐[J].數(shù)據(jù)分析與知識(shí)發(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.