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

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

　　現有的一般古建筑文物展示主要是應用動態網頁、Flash技術、流媒體技術等來實現，在真實性環境的營造、三維立體的交互展示與模擬實驗操作上還存在許多不足，如缺乏靈活性、不能實時更新內容和資源重復建設等。近年來，隨著互聯網的高速發展，涌現了大量以互聯網為基礎的虛擬現實技術，Web 3D技術基于Internet，依靠軟件技術來實現從本機三維圖形技術向互聯網擴展，具有網絡性、三維性和交互性等特征，且提供了具有很好表現力的虛擬現實網絡解決方案。它作為一種新型的網絡三維圖形技術，在立體空間三維模型的展示、虛擬空間及場景的營造、實體交互性等方面有著獨特的技術特色與優勢，并廣泛應用于教學、地理學、考古學、建筑學、醫學等領域[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開發人員就可以借助系統顯卡在瀏覽器里更流暢地展示3D場景和模型，還能創建復雜的導航和數據視覺化[2]。目前已出現很多第三方的WebGL中間件（Three.js、SceneJS、Processing.js等），進而減輕了三維網絡應用的開發負擔，本文使用Three.js開源3D庫來創建和渲染古建筑文物的3D場景。

　　1.2 HTML5

　　HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，現在仍處于發展階段。廣義上，HTML5實際是指包括HTML、CSS和JavaScript在內的一套技術組合，目的在于減少瀏覽器對插件的依賴性和豐富網頁的表現形式[3]。Canvas元素是HTML5中新增的頁面元素，該元素是一個圖形繪制容器，擁有一個基于JavaScript的API，可由腳本動態繪制圖像，本文使用的就是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來創建和渲染古建筑文物的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等技術設計并實現了古建筑文物三維全景展示。該三維全景展示具有跨時空的特點，實現了古建筑文物數字化信息資源的共享，在提高古建筑文物信息傳播效益的前提下有效地節約了信息傳播成本。同時為用戶創建了一個具有強烈沉浸性、交互性和趣味性的非正式欣賞環境，能夠有效地吸引用戶積極參與其中，達到了預期目標。

　　參考文獻

　　[1] 董榕，楊玉輝.Web3d通用型展覽館平臺開發與教育應用[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.