基于B/S模式的3D服装定制系统设计与实现
2018-03-10张晓琳
张晓琳
摘 要：为解决在线定制系统定制服装周期长、定制服务需要下载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通过网页中的新型标签
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
