摘  要： 針對當前虛擬古建筑文物缺乏靈活性、不能實時更新內容和資源重復建設等問題，提出了一種改進的Web 3D技術來虛擬古建筑物文物。首先闡述了虛擬古建筑文物存在的問題，然后介紹了所涉及到的關鍵技術，接著對古建筑文物三維全景展示進行設計，最后對其實現。實驗結果表明，采用改進的Web 3D技術所虛擬的古建筑文物三維全景達到了預期目標。

　　關鍵詞： Web 3D技術；古建筑文物；虛擬技術；全景展示

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

1 關鍵技術簡介

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

　　1.1 WebGL技術

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

　　1.2 HTML5

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

　　1.3 JSON

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

2 三維全景展示的設計

　　2.1 策略設計

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

　　2.2 總體設計

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

3 三維全景展示的實現

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

　　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為實現某一古建筑文物三維全景展示效果圖。

　　當點擊場景中的“前進”箭頭時，首先Ajax與服務器交互獲取下一個場景的數據，然后切換場景，并且同步更新畫布中顯示當前場景的名稱。根據場景的關系生成導航的箭頭；當點擊“暫停”按鈕時，場景停止/開始自動旋轉；當點擊“全屏”展示時，場景縮放/收縮成全屏/窗口，而且可以通過拖拽鼠標來移動視角，觀察整個720°的空間，還可以滾動鼠標滾輪鍵來縮放視角。

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

　　參考文獻

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

　　[2] 劉愛華，韓勇，張小壘，等.基于WebGL技術的網絡三維可視化研究與實現[J].地理空間信息，2012，10（1）：79-81.

　　[3] 馮科融，王和興，連加美，等.基于HTML5的3D多人網頁游戲實現方案[J].微型機與應用，2013，32（1）：4-6.

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

　　[5] 譚文文，丁世勇，李桂英.基于webGL和HTML5的網頁3D動畫的設計與實現[J].電腦知識與技術，2011（3）：1009-3044.