摘  要： 針對(duì)當(dāng)前虛擬古建筑文物缺乏靈活性、不能實(shí)時(shí)更新內(nèi)容和資源重復(fù)建設(shè)等問題，提出了一種改進(jìn)的Web 3D技術(shù)來虛擬古建筑物文物。首先闡述了虛擬古建筑文物存在的問題，然后介紹了所涉及到的關(guān)鍵技術(shù)，接著對(duì)古建筑文物三維全景展示進(jìn)行設(shè)計(jì)，最后對(duì)其實(shí)現(xiàn)。實(shí)驗(yàn)結(jié)果表明，采用改進(jìn)的Web 3D技術(shù)所虛擬的古建筑文物三維全景達(dá)到了預(yù)期目標(biāo)。

　　關(guān)鍵詞： Web 3D技術(shù)；古建筑文物；虛擬技術(shù)；全景展示

　　現(xiàn)有的一般古建筑文物展示主要是應(yīng)用動(dòng)態(tài)網(wǎng)頁、Flash技術(shù)、流媒體技術(shù)等來實(shí)現(xiàn)，在真實(shí)性環(huán)境的營造、三維立體的交互展示與模擬實(shí)驗(yàn)操作上還存在許多不足，如缺乏靈活性、不能實(shí)時(shí)更新內(nèi)容和資源重復(fù)建設(shè)等。近年來，隨著互聯(lián)網(wǎng)的高速發(fā)展，涌現(xiàn)了大量以互聯(lián)網(wǎng)為基礎(chǔ)的虛擬現(xiàn)實(shí)技術(shù)，Web 3D技術(shù)基于Internet，依靠軟件技術(shù)來實(shí)現(xiàn)從本機(jī)三維圖形技術(shù)向互聯(lián)網(wǎng)擴(kuò)展，具有網(wǎng)絡(luò)性、三維性和交互性等特征，且提供了具有很好表現(xiàn)力的虛擬現(xiàn)實(shí)網(wǎng)絡(luò)解決方案。它作為一種新型的網(wǎng)絡(luò)三維圖形技術(shù)，在立體空間三維模型的展示、虛擬空間及場(chǎng)景的營造、實(shí)體交互性等方面有著獨(dú)特的技術(shù)特色與優(yōu)勢(shì)，并廣泛應(yīng)用于教學(xué)、地理學(xué)、考古學(xué)、建筑學(xué)、醫(yī)學(xué)等領(lǐng)域[1]。因此本文通過引入改進(jìn)的Web 3D技術(shù)來有效地解決目前虛擬古建筑文物中存在的問題。

1 關(guān)鍵技術(shù)簡(jiǎn)介

　　本古建筑文物三維全景展示主要采用了WebGL&Three.js技術(shù)，并有效整合HTML5、JSON、Ajax、JSP、SSH（Strust+Spring+Hibernate）等技術(shù)來實(shí)現(xiàn)。

　　1.1 WebGL技術(shù)

　　WebGL是一套跨平臺(tái)、開源免費(fèi)的底層三維圖形JavaScript API，它允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場(chǎng)景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化[2]。目前已出現(xiàn)很多第三方的WebGL中間件（Three.js、SceneJS、Processing.js等），進(jìn)而減輕了三維網(wǎng)絡(luò)應(yīng)用的開發(fā)負(fù)擔(dān)，本文使用Three.js開源3D庫來創(chuàng)建和渲染古建筑文物的3D場(chǎng)景。

　　1.2 HTML5

　　HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段。廣義上，HTML5實(shí)際是指包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，目的在于減少瀏覽器對(duì)插件的依賴性和豐富網(wǎng)頁的表現(xiàn)形式[3]。Canvas元素是HTML5中新增的頁面元素，該元素是一個(gè)圖形繪制容器，擁有一個(gè)基于JavaScript的API，可由腳本動(dòng)態(tài)繪制圖像，本文使用的就是HTML5中的Canvas元素。

　　1.3 JSON

　　JSON（JavaScript Object Notation） 是一種輕量級(jí)的數(shù)據(jù)交換格式，它是基于JavaScript（Standard ECMA-262 3rd Edition-December 1999）的一個(gè)子集。JSON采用完全獨(dú)立于語言的文本格式，但也使用了類似于C語言家族的習(xí)慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）[4]。這些特性使JSON成為理想的數(shù)據(jù)交換語言，而且易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，因此本古建筑文物的3D場(chǎng)景切換采用JOSN格式與服務(wù)器交互。

2 三維全景展示的設(shè)計(jì)

　　2.1 策略設(shè)計(jì)

　　為了滿足用戶通過瀏覽器可以全面欣賞古建筑文物的需求，因此為每一個(gè)古建筑文物設(shè)置了一個(gè)或幾個(gè)觀察點(diǎn)，讓用戶可以在所設(shè)計(jì)的3D古建筑文物周圍任意切換位置，并且可以隨意縮放和移動(dòng)視覺，以便更好地觀察欣賞古建筑文物，讓用戶真正體驗(yàn)到身臨其境的感覺，進(jìn)而實(shí)現(xiàn)對(duì)古建筑文物的保護(hù)和傳播。為了達(dá)到此目標(biāo)，本文通過觀察點(diǎn)與觀察點(diǎn)之間的角度參數(shù)來表示切換的位置（即A點(diǎn)相對(duì)B點(diǎn)偏離的角度），并且為每一個(gè)古建筑文物設(shè)置一個(gè)入口觀察點(diǎn)，當(dāng)用戶點(diǎn)擊某個(gè)古建筑文物時(shí)首先進(jìn)入該入口觀察點(diǎn)，通過入口觀察點(diǎn)使用鼠標(biāo)或者方向鍵可以向其他任何位置進(jìn)行移動(dòng)，進(jìn)而使用戶更全面欣賞此古建筑文物。

　　2.2 總體設(shè)計(jì)

　　本三維全景展示采用Three.js來創(chuàng)建和渲染古建筑文物的3D場(chǎng)景，為了有效使用3D引擎，本文對(duì)其進(jìn)一步封裝成myPanorama.js，它負(fù)責(zé)古建筑文物3D全景的所有功能，包括初始化3D場(chǎng)景、場(chǎng)景的自動(dòng)旋轉(zhuǎn)與暫停、視角的縮放和移動(dòng)、場(chǎng)景的切換以及場(chǎng)景的全屏顯示等功能。在需要3D全景展示的頁面引入這個(gè)myPanorama.js文件和Three.js文件，就可以調(diào)用myPanorama.js中寫好的方法來管理古建筑文物的3D全景展示。myPanorama.js設(shè)計(jì)主要包括資源準(zhǔn)備、3D初始化和交互設(shè)計(jì)三部分，具體如圖1所示[5]。

3 三維全景展示的實(shí)現(xiàn)

　　本古建筑文物三維全景展示主要使用JSP作為表示層，Three.js作為3D引擎，myPanorama.js負(fù)責(zé)管理3D場(chǎng)景，使用Ajax與后臺(tái)服務(wù)器交互來獲取場(chǎng)景數(shù)據(jù)，并用JSON作為數(shù)據(jù)交換格式，其中后臺(tái)服務(wù)器程序采用目前主流的輕量級(jí)J2EE框架技術(shù)SSH來實(shí)現(xiàn)。下面是實(shí)現(xiàn)三維全景展示的核心代碼：

　　function initPanorama（viewEntity，canvasBox）{

　　function init（） {

　　camera=new THREE.PerspectiveCamera（75， containerWidth/containerHeight，1，1100）；

　　scene=new THREE.Scene（）；group=new THREE.Object3D（）；scene.add（group）；

　　texture_placeholder=document.createElement（′canvas′）；

　　texture_placeholder.width=128；texture_placeholder.height=128；……}……

　　function initBtn（）{

　　$（"#btnFor3d_box"）.css（"background-image"，′url（images/views/qqbox_transBack.png）′）；

　　$（"#btnFor3d_box"）.css（"left"，

　　$（canvasBox）.width（）-$（"#btnFor3d_box"）.width（））；

　　$（"#btnFor3d_box"）.css（"top"，

　　$（canvasBox）.height（）-

　　$（"#btnFor3d_box"）.height（））；

　　$（"#stopBtn"）.css（{′cursor′：′pointer′，′float′：′left′，′margin-left′：′10px′，′margin-top′：′2px′，′width′：′27px′，′height′：′27px′，′background-image′："url（images/views/playstopBtn.png）"，′background-position′：′-88px 0px′}）；

　　$（"#maxBtn"）.css（{′cursor′：′pointer′，′float′：′left′，′margin-left′：′10px′，′margin-top′：′

　　2px′，′width′：′25px′，′height′：′25px′，′background-image′："url（images/views/maxminBtn.png）"，′background-position′：′-25px 0px′}）；

　　$（′#viewInfo′）.css（{′position′："absolute"，"left"：

　　$（canvasBox）.width（）-

　　$（"#viewInfo"）.width（），′top′："2px"}）；

　　$（"#maxBtn"）.toggle（function（）{……}，……）；

　　$（"#stopBtn"）.toggle（……）；

　　$（′.viewItemBtn′）.click（……）；……}……}

　　圖2為實(shí)現(xiàn)某一古建筑文物三維全景展示效果圖。

　　當(dāng)點(diǎn)擊場(chǎng)景中的“前進(jìn)”箭頭時(shí)，首先Ajax與服務(wù)器交互獲取下一個(gè)場(chǎng)景的數(shù)據(jù)，然后切換場(chǎng)景，并且同步更新畫布中顯示當(dāng)前場(chǎng)景的名稱。根據(jù)場(chǎng)景的關(guān)系生成導(dǎo)航的箭頭；當(dāng)點(diǎn)擊“暫?！卑粹o時(shí)，場(chǎng)景停止/開始自動(dòng)旋轉(zhuǎn)；當(dāng)點(diǎn)擊“全屏”展示時(shí)，場(chǎng)景縮放/收縮成全屏/窗口，而且可以通過拖拽鼠標(biāo)來移動(dòng)視角，觀察整個(gè)720°的空間，還可以滾動(dòng)鼠標(biāo)滾輪鍵來縮放視角。

　　本文有效使用WebGL&Three.js、HTML5、Ajax、JSP及SSH等技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了古建筑文物三維全景展示。該三維全景展示具有跨時(shí)空的特點(diǎn)，實(shí)現(xiàn)了古建筑文物數(shù)字化信息資源的共享，在提高古建筑文物信息傳播效益的前提下有效地節(jié)約了信息傳播成本。同時(shí)為用戶創(chuàng)建了一個(gè)具有強(qiáng)烈沉浸性、交互性和趣味性的非正式欣賞環(huán)境，能夠有效地吸引用戶積極參與其中，達(dá)到了預(yù)期目標(biāo)。

　　參考文獻(xiàn)

　　[1] 董榕，楊玉輝.Web3d通用型展覽館平臺(tái)開發(fā)與教育應(yīng)用[J].實(shí)驗(yàn)室研究與探索，2012，31（7）：394-397.

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

　　[3] 馮科融，王和興，連加美，等.基于HTML5的3D多人網(wǎng)頁游戲?qū)崿F(xiàn)方案[J].微型機(jī)與應(yīng)用，2013，32（1）：4-6.

　　[4] 陳瑋，賈宗璞.利用JSON降低XML數(shù)據(jù)冗余的研究[J].計(jì)算機(jī)應(yīng)用與軟件，2012（9）：188-190.

　　[5] 譚文文，丁世勇，李桂英.基于webGL和HTML5的網(wǎng)頁3D動(dòng)畫的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2011（3）：1009-3044.