基于B/S模式的3D服裝定制系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

張曉琳

摘 要：為解決在線定制系統(tǒng)定制服裝周期長、定制服務(wù)需要下載APP的問題，結(jié)合在線服裝定制平臺(tái)需求，基于3D建模技術(shù)、3D互動(dòng)系統(tǒng)構(gòu)建技術(shù)，提出基于H5+Three.js+3Ds模型的技術(shù)方法，設(shè)計(jì)了基于B/S模式的3D服裝定制系統(tǒng)。該系統(tǒng)在手機(jī)端瀏覽器上就可進(jìn)行定制服務(wù)，涵蓋了從定制設(shè)計(jì)、量體預(yù)約到客戶訂單處理的全過程。客戶在虛擬世界中體驗(yàn)定制化過程，減少了設(shè)計(jì)、打樣周期。互動(dòng)平臺(tái)為提升客戶服務(wù)提供了有效的技術(shù)手段，客戶在面料、板型搭配選擇中獲得了愉快的定制體驗(yàn)。

關(guān)鍵詞：HTML5；Three.js；3Ds；3D；服裝定制

DOIDOI：10.11907/rjdk.172918

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）002-0096-03

0 引言

隨著生活水平的提高，人們的穿著已不再滿足于大眾化的款式品種，逐漸向追逐自我個(gè)性的展示方向發(fā)展。對服裝的要求也不再局限于好的服裝面料、流行款式及質(zhì)量，轉(zhuǎn)而追求基于自我喜好和舒適性的量身定制，追求服裝的品質(zhì)和品牌附加值，以突出自己的身份和地位。個(gè)性化穿著已成為趨勢，定制化是服裝、鞋帽企業(yè)發(fā)展新的利潤增長點(diǎn)。

隨著電子商務(wù)的不斷發(fā)展，利用互聯(lián)網(wǎng)進(jìn)行B2B、B2C、C2C、O2O等模式的交易越來越受歡迎，其中服裝鞋帽的交易額遙遙領(lǐng)先。電子商務(wù)對實(shí)體店面的沖擊在多個(gè)領(lǐng)域已經(jīng)有所體現(xiàn)，未來互聯(lián)網(wǎng)銷售經(jīng)營成為消費(fèi)的重要方式，在互聯(lián)網(wǎng)上進(jìn)行服裝定制的趨勢也日漸顯現(xiàn)。隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展，基于WebGL的3D網(wǎng)頁顯示技術(shù)，使服裝銷售成為互聯(lián)網(wǎng)時(shí)代的重要產(chǎn)業(yè)。新的互聯(lián)網(wǎng)技術(shù)在服裝定制銷售中發(fā)揮了無地域、無時(shí)間限制、無需實(shí)體、展示豐富、交互方便等特點(diǎn)，提高了服裝定制銷售能力。

1 相關(guān)技術(shù)

1.1 3ds max

3D Studio Max，簡稱3ds max，是Autodesk公司開發(fā)的基于PC系統(tǒng)的三維動(dòng)畫渲染和制作軟件。該軟件廣泛應(yīng)用于廣告、影視、工業(yè)設(shè)計(jì)、建筑設(shè)計(jì)、多媒體制作、游戲、輔助教學(xué)以及工程可視化等領(lǐng)域，擁有強(qiáng)大功能的3ds max廣泛應(yīng)用于電視、娛樂業(yè)、影視特效中[3]。我國3ds max多用于游戲中人物的服裝建模，而將服裝建模技術(shù)用于服裝行業(yè)少之又少。

1.2 WebGL技術(shù)

WebGL（Web Graphics Library）是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGLES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。這樣，Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器中更流暢地顯示3D場景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。WebGL解決了現(xiàn)有Web交互式三維動(dòng)畫的兩個(gè)問題：①它通過HTML腳本本身實(shí)現(xiàn)Web交互式三維動(dòng)畫制作，無需任何瀏覽器插件支持；②它利用底層的圖形硬件加速功能進(jìn)行圖形渲染，通過統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL接口實(shí)現(xiàn)。WebGL能夠運(yùn)行在各式各樣的硬件設(shè)備上，如臺(tái)式電腦、智能手機(jī)和平板電腦。WebGL已經(jīng)得到了Google Chrome、Safari、Firefox、Opera等瀏覽器支持[4]。如圖1所示。

1.3 Three.js

Three.js是基于WebGL的一款開發(fā)框架，是調(diào)用底層OpenGL ES圖形庫的一個(gè)javascript接口，屬于Html5技術(shù)的一個(gè)分支。WebGL通過網(wǎng)頁中的新型標(biāo)簽進(jìn)行顯示。通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場景和模型[5]。

2 系統(tǒng)體系結(jié)構(gòu)設(shè)計(jì)

服裝定制系統(tǒng)的總體架構(gòu)采用模型-視圖-控制器（MVC）結(jié)構(gòu)的分層設(shè)計(jì)模式，系統(tǒng)開發(fā)和可維護(hù)性高，有利于降低系統(tǒng)耦合性，提高程序的重用性[6]。結(jié)合H5、WebGL開發(fā)的結(jié)構(gòu)，使用Json數(shù)據(jù)傳輸、Jeecg開源項(xiàng)目、Java類以及一些配置文件，分別展示系統(tǒng)的視圖層、控制層、模型層（業(yè)務(wù)邏輯層）、數(shù)據(jù)訪問層，如圖2所示。視圖層是用戶和系統(tǒng)進(jìn)行交互的地方，里面包含了JSP、WebGL的UI界面，用戶通過一個(gè)控件組合成的View來與系統(tǒng)進(jìn)行交互。控制層主要由Jeecg的Controller充當(dāng)，每一個(gè)布局文件可由多個(gè)控制器控制，控制器完成所有前端的邏輯操作，實(shí)現(xiàn)了視圖層和模型層之間的交互。用戶表面上是通過視圖層與系統(tǒng)交互，實(shí)際上是通過控制層與系統(tǒng)交互。模型層用于存放一些實(shí)體信息，完成一些業(yè)務(wù)邏輯，為視圖層提供操作信息和狀態(tài)信息等[7]。而對數(shù)據(jù)庫、網(wǎng)絡(luò)、業(yè)務(wù)計(jì)算等的操作都在Model中進(jìn)行。

系統(tǒng)使用Jeecg框架實(shí)現(xiàn)對前端和數(shù)據(jù)庫數(shù)據(jù)的操作和業(yè)務(wù)邏輯處理，通過JQuery的Ajax技術(shù)，將前后端的Json格式數(shù)據(jù)與Http通訊交互。本系統(tǒng)使用MySQL數(shù)據(jù)庫存儲(chǔ)所有業(yè)務(wù)操作數(shù)據(jù)。

3 系統(tǒng)功能模塊設(shè)計(jì)

以3D服裝定制系統(tǒng)客戶端的設(shè)計(jì)與實(shí)現(xiàn)為例說明。首先服裝定制系統(tǒng)客戶端由消費(fèi)者注冊后完善個(gè)人基本信息，瀏覽網(wǎng)頁選擇要定制的服裝品類。然后根據(jù)自己的喜好對服裝進(jìn)行個(gè)性化定制，設(shè)計(jì)完成后提交訂單并付款。最后選擇上門量體或到店量體服務(wù)[8]。其功能模塊如圖3所示，概括為5大模塊：客戶信息管理、服務(wù)通知、3D高級定制、預(yù)約量體、設(shè)計(jì)服務(wù)。

4 系統(tǒng)實(shí)現(xiàn)

4.1 模型建立

服裝定制3D交互系統(tǒng)實(shí)現(xiàn)需要在3Ds Max中建立模型，形成如圖4所示的眾多服裝部件模型。

4.2 模型加載及數(shù)據(jù)交互

模型建立完成后，要將這些3Ds Max模型導(dǎo)出為obj文件才能被Three.js所識(shí)別。程序在H5界面加載模型，初始化場景代碼如下：

Three.js載入3D模型的代碼：

控制各部分展現(xiàn)由Three.js提供的控制程序?qū)崿F(xiàn)。包括旋轉(zhuǎn)、放大縮移、界面UI控制等模塊。同時(shí)，根據(jù)所選服裝的板型，動(dòng)態(tài)加載各部件。

4.3 客戶訂單

基于WebGL平臺(tái)開發(fā)客戶訂單。客戶將選擇好的面料、板型、小部件等通過保存定制按鈕交付給后臺(tái)即可下訂單。

下單過程中，先將客戶的選擇加入到購物車。客戶將購物車中的定金支付后即形成正式訂單，客戶可在“我的訂單”中查詢訂單狀況。當(dāng)客戶定制的服裝生產(chǎn)完畢，則工廠通過后臺(tái)接口，將訂單狀況改為“制作完成”，然后通過快遞發(fā)送給客戶或門店，客戶付全款后訂單執(zhí)行完畢。在線支付調(diào)用了支付寶的接口方法，具體內(nèi)容參考網(wǎng)頁鏈接[9]。

4.4 量體預(yù)約

客戶定制期間可通過系統(tǒng)與量體師預(yù)約，系統(tǒng)采用一鍵預(yù)約模式。點(diǎn)擊按鈕后，通過短信通知的方式通知量體師對預(yù)約客戶進(jìn)行量體。短信通知接口采用阿里云短信通知服務(wù)，具體內(nèi)容參考支付寶官網(wǎng)[10]。

5 結(jié)語

個(gè)性化穿著已是當(dāng)前服裝消費(fèi)的趨勢，定制化服裝成為企業(yè)發(fā)展新的利潤增長點(diǎn)。隨著電子商務(wù)的不斷發(fā)展，3D服裝定制平臺(tái)的體驗(yàn)和交易越來越多[11]。在“互聯(lián)網(wǎng)+”下的3D立體定制交互呈現(xiàn)，才能使客戶在面料、板型搭配選擇中具有身臨其境的體驗(yàn)。本文采用3Ds Max+Three.js+H5的原生復(fù)合開發(fā)技術(shù)，實(shí)現(xiàn)了從3D建模到3D互動(dòng)系統(tǒng)構(gòu)建，涵蓋了從定制設(shè)計(jì)、量體預(yù)約到客戶訂單處理的全過程。通過建立3D立體定制交互的服裝定制系統(tǒng)，使客戶在虛擬世界中體驗(yàn)定制化過程，減少了設(shè)計(jì)、打樣周期，建立了互動(dòng)平臺(tái)，為提升客戶服務(wù)提供了有效的技術(shù)手段。

參考文獻(xiàn)：

[1] 徐曉慧.基于產(chǎn)品精準(zhǔn)開發(fā)的服裝企業(yè)運(yùn)營慣性最小化方法研究[D].青島：青島大學(xué)，2007.

[2] 張坤，張鵬，馬強(qiáng).“互聯(lián)網(wǎng)+”下中小企業(yè)電子商務(wù)發(fā)展現(xiàn)狀及策略[J].中國商論，2015（30）：87-89.

[3] 金益.3ds max與Lumion在景觀動(dòng)畫中的對比研究[J].蘇州市職業(yè)大學(xué)學(xué)報(bào)，2014（4）：22-25.

[4] 魏書寒，孫麒.基于HTML5和WebGL的三維智慧社區(qū)管理系統(tǒng)的設(shè)計(jì)與研究[J].工業(yè)控制計(jì)算機(jī)，2017，30（5）：139-140.

[5] 王騰飛，劉俊男，周更新.基于Three.js 3D引擎的三維網(wǎng)頁實(shí)現(xiàn)與加密[J].企業(yè)技術(shù)開發(fā)，2014，33（1）：79-80.

[6] 李軍朝.建筑市場稽查信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2014.

[7] 許明輝.基于MVC的分層控制設(shè)計(jì)模型及其應(yīng)用研究[D].武漢：華中科技大學(xué)，2006.

[8] 吉麗云.基于Web Services的服裝定制系統(tǒng)平臺(tái)的研究與實(shí)現(xiàn)[D].北京：北京服裝學(xué)院，2007.

[9] 范少坤.支付寶支付流程[EB/OL].http：//www.cnblogs.com/fanshaokun/p/6255043.html.

[10] 支付寶官網(wǎng).短信接口接入API[EB/OL].https：//market.aliyun.com/products/57002003/cmapi011900.html？spm=5176.8216963.521665.2.z5jSeYJHJsku=postpay.

[11] 張妍.服裝網(wǎng)絡(luò)定制個(gè)性化服務(wù)成本及定價(jià)模型研究[D].上海：上海工程技術(shù)大學(xué)，2016.endprint