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

王建興

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

【關(guān)鍵詞】Three.js；OBJ；實(shí)體；三維展示

0 引言

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

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

1 需求分析

本文基于以下用戶(hù)需求：

①主要用于手機(jī)觀看，并通過(guò)微信朋友圈進(jìn)行傳播。

②響應(yīng)式網(wǎng)頁(yè)，能夠根據(jù)不同屏幕尺寸的手機(jī)瀏覽器，自動(dòng)調(diào)整頁(yè)面至最佳比例和模式，同時(shí)照顧到iOS和Android平臺(tái)的瀏覽器。

③頁(yè)面格式為單列直通。最上部為大標(biāo)題，接著就是3D展示，下部是簡(jiǎn)介。

④通過(guò)Three.js引擎，在HTML5的頁(yè)面中，實(shí)時(shí)渲染3D模型。模型能夠通過(guò)手指移動(dòng)且360度旋轉(zhuǎn)，并能通過(guò)兩指操作進(jìn)行縮放。

⑤3D模型由用戶(hù)提供obj格式。此模型結(jié)構(gòu)簡(jiǎn)單，所需計(jì)算量較小。

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

2 場(chǎng)景以及模型構(gòu)建

2.1 3d空間模型

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

2.2 天空盒子背景

外景天空盒子技術(shù)要領(lǐng)：相機(jī)的拍攝相片應(yīng)時(shí)候做裁剪處理，形成正方形圖片，這樣完成盒子模型的仿真程度會(huì)比較高。其次，對(duì)于相機(jī)的像素要求高，能夠最大限度還原出場(chǎng)景的全景。

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

2.3 OBJ模型制作

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

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

3 實(shí)現(xiàn)方法

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

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

4 總結(jié)

本文工作目的是通過(guò)三維技術(shù)更好地更好的展示商品。HTML5的問(wèn)世以及隨之而來(lái)的各種類(lèi)庫(kù)強(qiáng)大了web網(wǎng)絡(luò)的這種服務(wù)能力。基于Three.js庫(kù)可以實(shí)現(xiàn)的虛擬三維展示應(yīng)用，同時(shí)還可以把相關(guān)應(yīng)用拓展到各種Web終端平臺(tái)。

【參考文獻(xiàn)】

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

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

[3]極客學(xué)院.Three.js案例指導(dǎo)[EB/OL]. http：//www.jikexueyuan.com/course/2109_1.html.endprint