基于Three.js的虛擬漫游服裝店的構(gòu)建

耿秋晚,張海波

(北京服裝學(xué)院信息中心,北京 100029)

目前服裝品牌利用智能科技打破營(yíng)銷同質(zhì)化成為了當(dāng)下的趨勢(shì),許多服裝品牌對(duì)虛擬現(xiàn)實(shí)營(yíng)銷進(jìn)行了嘗試[1]。虛擬現(xiàn)實(shí)開發(fā)技術(shù)在線上零售中可以再現(xiàn)購(gòu)物中心、貨架、產(chǎn)品等,通過虛擬服裝店環(huán)境的搭建,可以為顧客營(yíng)造良好的視覺氛圍。通過數(shù)字服裝延伸的虛擬陳列,可以拓寬線上展示形式、表達(dá)品牌理念,搶占消費(fèi)者市場(chǎng)[2]。通過在服裝店中漫游功能的實(shí)現(xiàn),可以增加趣味性,吸引消費(fèi)者并引發(fā)其購(gòu)買行為,最終達(dá)到推動(dòng)服裝營(yíng)銷和增加營(yíng)收的目的。

早期虛擬現(xiàn)實(shí)在線上主要通過VRML、Java3D 等技術(shù)實(shí)現(xiàn),但這些實(shí)現(xiàn)技術(shù)均存在需要安裝應(yīng)用插件的共性問題[3],WebGL 技術(shù)解決了這個(gè)問題,它可以在所有兼容WebGL的瀏覽器中流暢地展示三維場(chǎng)景和模型[4]。Three.js是一個(gè)用于輔助WebGL 開發(fā)的框架和第三方庫(kù),它簡(jiǎn)化了Web GL 原生API中的底層細(xì)節(jié),對(duì)3D 圖形編程中常用的對(duì)象以簡(jiǎn)單和直觀的方式進(jìn)行了封裝。Three.js功能強(qiáng)大,在開發(fā)過程中采用了很多圖形引擎中的高級(jí)技巧,可以極大地提高性能[5-6],有效降低開發(fā)難度和復(fù)雜度?；赥hree.js實(shí)現(xiàn)在Web端無插件構(gòu)建虛擬服裝店及漫游功能,對(duì)其中的關(guān)鍵技術(shù)進(jìn)行介紹,如前期模型的數(shù)字化、基本場(chǎng)景的構(gòu)建、碰撞檢測(cè)、人物漫游等。

1 虛擬服裝店的數(shù)字化

1.1 虛擬服裝數(shù)字化

1.1.1 服裝縫合模擬

服裝是由衣片相互縫合而成,虛擬服裝的生成也一樣需要在衣片之間設(shè)置一對(duì)一縫線[7]。三維服裝軟件Style3D 是一個(gè)國(guó)產(chǎn)3D 數(shù)字化設(shè)計(jì)和建模工具。在Style3D 中導(dǎo)入虛擬模特,將版片在2D 窗口進(jìn)行顯示并對(duì)其擺放位置進(jìn)行調(diào)整;然后在3D 窗口將版片合理放置在模特安排點(diǎn)上,對(duì)需要縫合的邊使用縫合工具進(jìn)行虛擬縫合;經(jīng)過“模擬”,服裝版片和縫紉線就會(huì)在模特身上模擬形成三維服裝。服裝的縫合模擬流程,如圖1所示。

圖1 服裝虛擬縫合模擬流程

1.1.2 服裝懸掛模擬

對(duì)上衣、連衣裙這2類服裝進(jìn)行懸掛的操作流程比較簡(jiǎn)單。在Style3D 中完成虛擬試穿之后,只需要將場(chǎng)景中的人體模特刪除;然后添加衣架并將衣架移動(dòng)到服裝內(nèi)部合適的位置,使衣架與服裝的肩縫處于同一水平,再進(jìn)行模擬即可;模擬完成之后對(duì)服裝進(jìn)行局部調(diào)整,直至達(dá)到理想的懸掛效果,如圖2所示。

圖2 上衣懸掛模擬過程

褲裝、半身裙這2類使用褲架進(jìn)行懸掛的服裝模擬的操作流程相對(duì)比較復(fù)雜。使用上衣類型的衣架在進(jìn)行模擬時(shí),服裝會(huì)在重力的模擬作用下落在衣架上,但是如果使用褲架以衣架模擬的方法直接進(jìn)行模擬,服裝會(huì)在重力的作用下直接掉落在地上。以褲裝為例,介紹使用褲架進(jìn)行懸掛模擬的流程,見表1。

表1 褲裝懸掛模擬流程

1.2 虛擬陳列展示數(shù)字化

1.2.1 服裝虛擬陳列展示方式

服裝陳列是一種視覺表現(xiàn)手法和宣傳手段,正掛陳列、側(cè)掛陳列、疊裝陳列和人模陳列是常見的4種陳列方式[8]。為使用戶在漫游逛店時(shí)可以看到服裝的全貌,充分展示服裝細(xì)節(jié),采取正掛陳列、側(cè)掛陳列和人模陳列3種方式相結(jié)合,豐富陳列形式,增加視覺變化。在Style3D 中將懸掛模擬的服裝生成正掛陳列裝置和側(cè)掛陳列裝置,穿著模擬的服裝生成人模陳列裝置。服裝虛擬陳列展示的3種方式如圖3所示。

圖3 服裝虛擬陳列展示方式

1.2.2 虛擬零售空間布局

好的零售空間布局能夠?qū)Φ赇伒恼w外觀進(jìn)行展示,為用戶提供最佳體驗(yàn),實(shí)現(xiàn)用戶的購(gòu)買行為最大化。零售商開發(fā)了幾種常見的布局方式,比如簡(jiǎn)單網(wǎng)格布局、回環(huán)布局、島式布局、展會(huì)布局等[9]。采用如圖4所示的展會(huì)布局方式,像展會(huì)一樣把商品像藝術(shù)品那樣布置。在店鋪的邊界處擺放商品,中間區(qū)域保持空曠,以便用戶四處走動(dòng)。由于商品前沒有任何遮擋物,這種布局使可視區(qū)域最大化[9]。在Blender中對(duì)服裝店進(jìn)行建模,并將從Style3D 中導(dǎo)出的服裝陳列裝置導(dǎo)入Blender,按照此布局進(jìn)行擺放。由于模型要在線上進(jìn)行展示,為兼顧展示效果和速度,在Blender中對(duì)模型進(jìn)行輕量化處理并導(dǎo)出。

圖4 展會(huì)布局方式

2 Three.js場(chǎng)景構(gòu)建

2.1 基本場(chǎng)景構(gòu)建

Three.js基本場(chǎng)景的構(gòu)建需要3 個(gè)基本的元素,即場(chǎng)景、相機(jī)和渲染器。場(chǎng)景是一個(gè)容器,主要用于保存、跟蹤所要渲染的物體和使用的光源[10],任何物體都必須添加到場(chǎng)景中才有可能被繪制。相機(jī)決定在場(chǎng)景中能夠看到什么,選擇透視投影相機(jī),它遵循近大遠(yuǎn)小的透視規(guī)律,更貼近人對(duì)現(xiàn)實(shí)生活的感知[11]。渲染器會(huì)基于相機(jī)和場(chǎng)景提供的信息,調(diào)用底層圖形API執(zhí)行場(chǎng)景繪制工作。

當(dāng)場(chǎng)景或相機(jī)發(fā)生變化時(shí),渲染器需要重新執(zhí)行渲染方法對(duì)渲染圖像進(jìn)行更新,即渲染循環(huán)。渲染循環(huán)通過.request AnimationFrame()方法來實(shí)現(xiàn),它以渲染函數(shù)作為參數(shù),請(qǐng)求再次執(zhí)行渲染函數(shù)渲染下一幀,在理想的情況下渲染幀率可以達(dá)到60 FPS。

2.2 加載三維模型

加載的服裝店三維模型是通過Blender導(dǎo)出的gltf格式的壓縮模型,必須經(jīng)過DRACOLoader解壓縮轉(zhuǎn)換后才能使用[12](DRACOLoader,用加載出Draco庫(kù)壓縮的幾何體的加載器)。解壓縮時(shí)首先要在解析器中設(shè)置draco文件路徑,使用gltf加載器GLTFLoader,用load()方法解析gltfJSON 文件,載入外部資源并通過回調(diào)函數(shù)返回結(jié)果[5],設(shè)置gltf加載器的draco解碼器;用加載器加載模型,并將其添加到Three.js場(chǎng)景中。

3 碰撞檢測(cè)

3.1 八叉樹碰撞檢測(cè)原理

碰撞檢測(cè)的目的是避免出現(xiàn)人物在場(chǎng)景中漫游時(shí),與其他模型發(fā)生穿透的問題,并提高虛擬場(chǎng)景的真實(shí)性。采用八叉樹碰撞檢測(cè),它屬于空間剖分的碰撞檢測(cè)。八叉樹是一種空間數(shù)據(jù)結(jié)構(gòu)[13],它基于樹型結(jié)構(gòu)能夠同時(shí)在多個(gè)尺度上進(jìn)行空間細(xì)分,將一個(gè)圍繞整個(gè)空間的包圍體劃分成8個(gè)更小的立方體空間,檢測(cè)小立方體空間中是否存在碰撞點(diǎn),如果沒有檢測(cè)到碰撞就不再對(duì)這個(gè)立方體進(jìn)行劃分;如果檢測(cè)到碰撞點(diǎn)就對(duì)這個(gè)立方體進(jìn)行再劃分;這樣一直劃分下去,通過這種方法可以對(duì)碰撞點(diǎn)進(jìn)行快速聚焦,檢測(cè)到空間中物體碰撞發(fā)生的位置。

3.2 碰撞檢測(cè)實(shí)現(xiàn)

3.2.1 創(chuàng)建人物碰撞體和場(chǎng)景碰撞組

創(chuàng)建漫游人物的碰撞體,在代碼中創(chuàng)建一個(gè)膠囊體對(duì)象對(duì)人物進(jìn)行模擬,通過膠囊體參數(shù)的設(shè)置可以模擬出人物的身高和寬度,如圖5所示。創(chuàng)建碰撞組對(duì)象THREE.Group(),加載服裝店模型后通過.add()方法將需要與漫游人物進(jìn)行碰撞檢測(cè)的物體添加進(jìn)來,然后將碰撞組添加到場(chǎng)景中。

圖5 膠囊碰撞體

在Three.js中創(chuàng)建八叉樹空間對(duì)象,通過.from Graph Node()方法把碰撞組中所有的網(wǎng)格節(jié)點(diǎn)添加到八叉樹空間對(duì)象中,進(jìn)行八叉樹的劃分,確保所有網(wǎng)格對(duì)象被分配到合適的節(jié)點(diǎn)中。在進(jìn)行碰撞檢測(cè)時(shí),可以避免對(duì)整個(gè)場(chǎng)景中的所有網(wǎng)格進(jìn)行遍歷,從而有效降低碰撞檢測(cè)過程中的計(jì)算量,提高性能。

3.2.2 碰撞檢測(cè)

碰撞函數(shù)是判斷人物與物體發(fā)生的碰撞計(jì)算。在處理碰撞時(shí)涉及3個(gè)不同階段,分別是碰撞檢測(cè)、碰撞測(cè)定和碰撞響應(yīng)[13]。

(1)碰撞檢測(cè)。

碰撞檢測(cè)即判斷碰撞有沒有發(fā)生。碰撞檢測(cè)是碰撞處理的第一階段,如果沒發(fā)生碰撞,就不需執(zhí)行之后的階段。將人物的膠囊碰撞體作為參數(shù),通過調(diào)用八叉樹自帶的.capsuleIntersect()方法,將膠囊碰撞體實(shí)例添加到八叉樹空間中進(jìn)行碰撞檢測(cè)。

(2)碰撞測(cè)定。

碰撞測(cè)定即做出碰撞具體在什么地方出現(xiàn)。檢測(cè)會(huì)返回一個(gè)結(jié)果result,若result的值為false則沒有發(fā)生碰撞,若發(fā)生碰撞會(huì)返回一個(gè)碰撞的法向量和深度值。

(3)碰撞響應(yīng)。

碰撞響應(yīng)即做出碰撞產(chǎn)生的效果。場(chǎng)景中的碰撞檢測(cè),最基本的就是人物站在地面上不穿透地面。當(dāng)檢測(cè)到人物與地面發(fā)生碰撞時(shí),對(duì)當(dāng)前人物是否在地面上這個(gè)狀態(tài)值由false變?yōu)閠rue,為避免發(fā)生地面穿?，F(xiàn)象,重力加速度應(yīng)該停止,并將人物垂直方向的速度變?yōu)?。由于發(fā)生碰撞人物會(huì)陷進(jìn)地面一定的深度,還需要對(duì)人物的高度位置進(jìn)行還原處理,避免發(fā)生地面穿?，F(xiàn)象。將碰撞的法向量與深度相乘得到需要進(jìn)行調(diào)整的距離向量,將它作為參數(shù)傳入膠囊碰撞體對(duì)象的.translate()方法中,即可還原人物位置。

4 人物漫游

4.1 漫游人物的創(chuàng)建和加載

漫游人物模型應(yīng)是本身帶有變形動(dòng)畫數(shù)據(jù)的模型。為了方便在Style3D 中直接導(dǎo)出obj格式的模特作為人物模型,在Mixamo網(wǎng)站選擇人物待機(jī)狀態(tài)、走路狀態(tài)、跑步狀態(tài)等動(dòng)作將其賦予給人物;下載角色綁定使用與Blender 兼容的FBX 二進(jìn)制格式;選擇With Out Skin選項(xiàng)下載模型,這個(gè)選項(xiàng)下載的模型只有骨骼沒有蒙皮,因此文件會(huì)很小。通過Mixamo生成的角色,如圖6所示。在Blender中將多個(gè)動(dòng)作動(dòng)畫合成在一個(gè)模型上,如圖7所示,將模型導(dǎo)出為gltf格式,用于在Three.js代碼中進(jìn)行加載。加載時(shí)要通過GLTFLoader生成加載器對(duì)象,并通過.load方法加載路徑中的人物模型到場(chǎng)景中。

圖6 Mixamo網(wǎng)站制作動(dòng)作

圖7 Blender中合成動(dòng)作

4.2 第三人稱效果

第三人稱是用戶以旁觀者的視角觀察場(chǎng)景中的漫游人物與環(huán)境。這種視角通常處于用戶所控制的漫游人物的上方,所以第三人稱也被稱為“上帝視角”[14]。這種上帝視角往往通過相機(jī)來實(shí)現(xiàn),通過相機(jī)綁定人物,跟隨人物的移動(dòng)或旋轉(zhuǎn)來調(diào)整位置或角度并始終觀察場(chǎng)景。

4.2.1 相機(jī)綁定跟隨人物

在將人物與相機(jī)進(jìn)行綁定時(shí),為人物添加一個(gè)空的子物體,讓相機(jī)作為這個(gè)空對(duì)象的子物體,它們之間為父子綁定關(guān)系,如圖8所示。這樣設(shè)置,不但可以實(shí)現(xiàn)相機(jī)對(duì)人物的跟隨,而且當(dāng)相機(jī)跟隨空對(duì)象一起旋轉(zhuǎn)時(shí)也不會(huì)影響人物。通過相機(jī)的位置參數(shù)設(shè)置相機(jī)與人物的位置關(guān)系,讓相機(jī)跟隨在人物后面并設(shè)置合適的高度,通過相機(jī)的.look At()方法傳入人物的位置讓相機(jī)看向人物。

圖8 綁定關(guān)系

4.2.2 相機(jī)自由視角控制

相機(jī)自由視角控制是指讓相機(jī)跟隨鼠標(biāo)移動(dòng)而變化,實(shí)現(xiàn)用戶操縱鼠標(biāo)以第三人稱視角在場(chǎng)景中進(jìn)行環(huán)視及俯視查看。在代碼中實(shí)現(xiàn)時(shí),對(duì)鼠標(biāo)事件進(jìn)行監(jiān)聽,根據(jù)鼠標(biāo)在屏幕中的移動(dòng),左右旋轉(zhuǎn)人物或上下旋轉(zhuǎn)空對(duì)象。鼠標(biāo)事件MouseEvent.movement X 提供當(dāng)前和上一個(gè)mousemove事件之間鼠標(biāo)在水平方向上的移動(dòng)值,根據(jù)鼠標(biāo)移動(dòng)的方向進(jìn)行計(jì)算。鼠標(biāo)移動(dòng)的距離越大,旋轉(zhuǎn)角度就越大。鼠標(biāo)垂直移動(dòng)實(shí)現(xiàn)俯仰查看時(shí),需要設(shè)定一個(gè)旋轉(zhuǎn)臨界角度值,當(dāng)超出這個(gè)角度時(shí)就固定在這個(gè)角度,避免出現(xiàn)旋轉(zhuǎn)到地面下或者上下翻轉(zhuǎn)的情況。最終實(shí)現(xiàn)的第三人稱效果如圖9所示。

圖9 第三人稱視角

4.3 人物移動(dòng)控制

通過鍵盤按鍵控制人物前后左右移動(dòng),鍵盤行為與其對(duì)應(yīng)功能見表2。

表2 鍵盤綁定

根據(jù)鍵盤狀態(tài)更新人物移動(dòng)的速度,根據(jù)按下的時(shí)間累加狀態(tài),在更新函數(shù)中對(duì)控制人物移動(dòng)的函數(shù)進(jìn)行調(diào)用,實(shí)現(xiàn)人物的移動(dòng)。設(shè)計(jì)按下“W”鍵時(shí)實(shí)現(xiàn)人物的前進(jìn),因此需對(duì)人物的前進(jìn)方向向量進(jìn)行設(shè)置,獲取人物前進(jìn)的方向,計(jì)算人物速度時(shí)需給人物的速度加上當(dāng)前前進(jìn)的方向通過.multiplyScalar()方法與時(shí)間相乘,就可以實(shí)現(xiàn)按鍵的時(shí)間長(zhǎng)短控制人物移動(dòng)的速度(按得越久速度越快)。設(shè)計(jì)按下“S”鍵時(shí)實(shí)現(xiàn)人物后退,因此需在設(shè)置速度時(shí)加一個(gè)負(fù)號(hào)。

當(dāng)按鍵抬起后,人物應(yīng)該由移動(dòng)變?yōu)橥Ｖ埂Ｌ砑幼枘岬膮?shù)設(shè)置,在鍵盤狀態(tài)為未按下的條件下,給速度添加一個(gè)反方向的力,通過.addScaled Vector()方法將本身的速度與反方向相乘,將得到的乘積加到速度向量上,實(shí)現(xiàn)人物移動(dòng)逐漸停止的效果。

已知人物向上的方向與前進(jìn)的方向,而側(cè)方方向垂直于這2個(gè)方向形成的平面,因此可以運(yùn)用向量叉積運(yùn)算求出人物左右的方向,如圖10所示。向上方向?yàn)?x1,y1,z1),前進(jìn)方向?yàn)?x2,y2,z2),叉積運(yùn)算求得側(cè)方方向公式,如式(1)所示。代碼實(shí)現(xiàn)時(shí),正前方方向向量通過.cross()方法傳入正上方方向,進(jìn)行叉積運(yùn)算得到側(cè)方方向向量。人物移動(dòng)的原理與前后移動(dòng)一樣,當(dāng)按下“A”“D”鍵時(shí),可以實(shí)現(xiàn)人物的左右移動(dòng)。

圖10 叉積運(yùn)算求側(cè)方向示意圖

4.4 人物動(dòng)畫切換

在不添加動(dòng)畫的情況下,人物只能以靜止僵硬的姿態(tài)在場(chǎng)景中移動(dòng),因此需要為人物添加動(dòng)畫,并根據(jù)不同的狀態(tài)對(duì)動(dòng)畫進(jìn)行切換,讓人物在場(chǎng)景中完成走或跑的動(dòng)畫。

4.4.1 動(dòng)作處理

為加載后的漫游人物模型創(chuàng)建一個(gè)動(dòng)作混合器對(duì)象,然后對(duì)模型自帶的動(dòng)畫數(shù)據(jù)進(jìn)行for循環(huán)處理,根據(jù)模型中名為animations的成員對(duì)象的長(zhǎng)度進(jìn)行循環(huán),animations的長(zhǎng)度即模型包含動(dòng)作的數(shù)量,通過animations[i].name可獲取每一個(gè)動(dòng)作的名稱,通過mixer.clip Action方法可裁剪對(duì)應(yīng)的動(dòng)作[10]。這樣就可以將動(dòng)作名稱和動(dòng)畫一一對(duì)應(yīng)。

為人物設(shè)置一個(gè)初始的激活動(dòng)作,加載漫游人物后讓人物在沒有移動(dòng)時(shí)播放靜止?fàn)顟B(tài)下的“待機(jī)”動(dòng)畫。要讓程序正常播放動(dòng)畫,還需要在渲染函數(shù)中以mixer.update(delta)的形式告訴混合器本次渲染和上次渲染的時(shí)間差,調(diào)用update函數(shù)對(duì)每一幀動(dòng)作進(jìn)行更新?；旌掀鲗⒏鶕?jù)時(shí)間差來判斷模型的頂點(diǎn)從上一個(gè)關(guān)鍵幀向下一個(gè)變形目標(biāo)移動(dòng)的距離[10]。

4.4.2 動(dòng)作切換

為實(shí)現(xiàn)動(dòng)作流暢切換,首先將上一個(gè)動(dòng)作通過fadeOut方法慢慢淡出。動(dòng)作切換時(shí)以.reset().set Effective TimeScale(1).set EffectiveWeight(1).fadeIn(0.3).play()鏈?zhǔn)秸{(diào)用的方式將動(dòng)作進(jìn)行重置并設(shè)置時(shí)間影響因子、權(quán)重影響因子、動(dòng)作漸入等,調(diào)用play方法執(zhí)行播放動(dòng)畫。THREE.Animation Mixer提供了可監(jiān)聽的事件,調(diào)用混合器的addEvent Listener函數(shù)指定事件監(jiān)聽函數(shù),當(dāng)一個(gè)動(dòng)畫徹底播放完成時(shí),監(jiān)聽函數(shù)會(huì)收到“finished”事件通告。監(jiān)聽到動(dòng)畫結(jié)束后,執(zhí)行將動(dòng)作再次恢復(fù)到默認(rèn)的人物靜止休閑狀態(tài)。當(dāng)人物在運(yùn)動(dòng)狀態(tài)下,會(huì)有一個(gè)水平的速度(x或z),這時(shí)需要根據(jù)人物的運(yùn)動(dòng)速度大小判斷人物的動(dòng)作(走或跑)。判斷流程如圖11所示。最終實(shí)現(xiàn)人物前進(jìn)的動(dòng)畫效果如圖12所示。

圖11 動(dòng)畫切換判斷流程

圖12 人物前進(jìn)動(dòng)畫

5 結(jié)束語

討論了基于Three.js構(gòu)建虛擬漫游服裝店的關(guān)鍵技術(shù)和流程,實(shí)踐表明:經(jīng)過數(shù)字化處理的服裝店三維模型可以在Web端實(shí)現(xiàn)可視化顯示及場(chǎng)景漫游。分析了服裝店場(chǎng)景中服裝數(shù)字化不同的模擬方式,基于虛擬陳列展示和零售空間布局的理論對(duì)服裝店場(chǎng)景中的陳列展示進(jìn)行數(shù)字化;介紹了Three.js中場(chǎng)景構(gòu)建的流程,結(jié)果頁(yè)面中實(shí)現(xiàn)以良好的預(yù)覽效果對(duì)服裝店進(jìn)行顯示;基于八叉樹原理的碰撞檢測(cè)可以避免穿透現(xiàn)象,實(shí)現(xiàn)人物在場(chǎng)景中的漫游和交互,用戶可以方便地在網(wǎng)頁(yè)中進(jìn)行虛擬漫游逛店?；诂F(xiàn)有成果,可進(jìn)一步開展對(duì)服裝三維交互等功能的研究,提供更加豐富的用戶購(gòu)物體驗(yàn)。