基于B/S模式的3D服裝定制系統設計與實現

張曉琳

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

關鍵詞：HTML5；Three.js；3Ds；3D；服裝定制

DOIDOI：10.11907/rjdk.172918

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2018）002-0096-03

0 引言

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

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

1 相關技術

1.1 3ds max

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

1.2 WebGL技術

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

1.3 Three.js

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

2 系統體系結構設計

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

系統使用Jeecg框架實現對前端和數據庫數據的操作和業務邏輯處理，通過JQuery的Ajax技術，將前后端的Json格式數據與Http通訊交互。本系統使用MySQL數據庫存儲所有業務操作數據。

3 系統功能模塊設計

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

4 系統實現

4.1 模型建立

服裝定制3D交互系統實現需要在3Ds Max中建立模型，形成如圖4所示的眾多服裝部件模型。

4.2 模型加載及數據交互

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

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

控制各部分展現由Three.js提供的控制程序實現。包括旋轉、放大縮移、界面UI控制等模塊。同時，根據所選服裝的板型，動態加載各部件。

4.3 客戶訂單

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

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

4.4 量體預約

客戶定制期間可通過系統與量體師預約，系統采用一鍵預約模式。點擊按鈕后，通過短信通知的方式通知量體師對預約客戶進行量體。短信通知接口采用阿里云短信通知服務，具體內容參考支付寶官網[10]。

5 結語

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

參考文獻：

[1] 徐曉慧.基于產品精準開發的服裝企業運營慣性最小化方法研究[D].青島：青島大學，2007.

[2] 張坤，張鵬，馬強.“互聯網+”下中小企業電子商務發展現狀及策略[J].中國商論，2015（30）：87-89.

[3] 金益.3ds max與Lumion在景觀動畫中的對比研究[J].蘇州市職業大學學報，2014（4）：22-25.

[4] 魏書寒，孫麒.基于HTML5和WebGL的三維智慧社區管理系統的設計與研究[J].工業控制計算機，2017，30（5）：139-140.

[5] 王騰飛，劉俊男，周更新.基于Three.js 3D引擎的三維網頁實現與加密[J].企業技術開發，2014，33（1）：79-80.

[6] 李軍朝.建筑市場稽查信息管理系統設計與實現[D].成都：電子科技大學，2014.

[7] 許明輝.基于MVC的分層控制設計模型及其應用研究[D].武漢：華中科技大學，2006.

[8] 吉麗云.基于Web Services的服裝定制系統平臺的研究與實現[D].北京：北京服裝學院，2007.

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

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

[11] 張妍.服裝網絡定制個性化服務成本及定價模型研究[D].上海：上海工程技術大學，2016.endprint