基于Three.js的虛擬三維展示研究

王建興

【摘 要】本文研究了關于實體虛擬數(shù)據(jù)模型構建方法，通過對javascript中的Three.js引擎的研究，實現(xiàn)了基于網(wǎng)頁的虛擬實體三維展示。

【關鍵詞】Three.js；OBJ；實體；三維展示

0 引言

隨著計算機與互聯(lián)網(wǎng)的高速發(fā)展，HTML5的出現(xiàn)標志著互聯(lián)網(wǎng)進入到了一個新的層次，用戶通過瀏覽器就能使用到以往需要安裝各種插件才能進行的各類操作。在新技術里，人們想要將現(xiàn)實的物體通過虛擬環(huán)境呈現(xiàn)的過程也將變得簡單。

本文研究實體虛擬三維展示。其實現(xiàn)的過程主要分為兩部分：一是如何實體還原成虛擬模型；二是將虛擬模型在網(wǎng)頁端口進行展示。

1 需求分析

本文基于以下用戶需求：

①主要用于手機觀看，并通過微信朋友圈進行傳播。

②響應式網(wǎng)頁，能夠根據(jù)不同屏幕尺寸的手機瀏覽器，自動調整頁面至最佳比例和模式，同時照顧到iOS和Android平臺的瀏覽器。

③頁面格式為單列直通。最上部為大標題，接著就是3D展示，下部是簡介。

④通過Three.js引擎，在HTML5的頁面中，實時渲染3D模型。模型能夠通過手指移動且360度旋轉，并能通過兩指操作進行縮放。

⑤3D模型由用戶提供obj格式。此模型結構簡單，所需計算量較小。

⑥只需要前端的工作，不需要后臺數(shù)據(jù)庫庫支持。

2 場景以及模型構建

2.1 3d空間模型

Three.js創(chuàng)建的場景scene空間坐標x，y，z軸可以無限延伸，本文實驗布局提供了九個點的圖形展示。Three.js依據(jù)WebGL的規(guī)范性，做了一些簡單的封裝，可以利用強大的鏡頭控制器完成“行走”等一系列動作，真實完成虛擬景象。

2.2 天空盒子背景

外景天空盒子技術要領：相機的拍攝相片應時候做裁剪處理，形成正方形圖片，這樣完成盒子模型的仿真程度會比較高。其次，對于相機的像素要求高，能夠最大限度還原出場景的全景。

外景的天空盒子原理模型展示：從一個定點中心拍攝上下左右前后共計6張景觀圖片將其經(jīng)過處理后貼放在實物的四周，模擬出虛擬的場景來。

2.3 OBJ模型制作

OBJ模型的制作根據(jù)圖片還原成3D模型的原理，通過對標志點的識別聯(lián)系，建立起相應的虛擬3D實體數(shù)據(jù)模型。完成實體三維虛擬化過程需要先將實體進行照片的拍攝。拍攝的照片數(shù)量越多，能夠識別出來的標志點就越多，還原成的圖片與實體的真實度就越多。一般對實體拍攝的照片數(shù)量需要32張。

實體還原的真實度除了受照片所能識別的特征點數(shù)量影響外，對于相機的像素、環(huán)境光的影響都有一定的要求。在過亮或者過暗環(huán)境拍攝的照片，還原出來的實體景象也相對較暗。一些像素較低的拍攝器械會導致還原出來的虛擬實體清晰度不高。

3 實現(xiàn)方法

使用Three.js創(chuàng)建項目的主要過程：創(chuàng)建場景（畫布），載入相機（carema），實體（OBJLoader），光線（light）元素，最后通過渲染（render）獲取圖片，這個過程中，Three.js提供了多種的相機以及光線，可以通過調用不同的類庫進行環(huán)境的布置。

完成了文件的導入部分后，最后就是修繕整體的視覺感受。整體效果實現(xiàn)后，瀏覽場景時，可以隨意轉換場景，觀看實體的展示。實體在虛擬呈像中的真實度相比于flash制作出來的真實度更高。

4 總結

本文工作目的是通過三維技術更好地更好的展示商品。HTML5的問世以及隨之而來的各種類庫強大了web網(wǎng)絡的這種服務能力?；赥hree.js庫可以實現(xiàn)的虛擬三維展示應用，同時還可以把相關應用拓展到各種Web終端平臺。

【參考文獻】

[1]王騰飛，等.基于Three.js 3D引擎的三維網(wǎng)頁實現(xiàn)與加密[J].企業(yè)技術開發(fā)，2014，33（2）.

[2]任康紅，等.基于Three.js的真實三維地形可視化設計與實現(xiàn)[J].測繪與空間地理信息，2015，38（10）.

[3]極客學院.Three.js案例指導[EB/OL]. http：//www.jikexueyuan.com/course/2109_1.html.endprint