袁自勇　李瑶　傅威

摘要：通过真人模特实拍图建立人体模型，运用叠加层技术将人体模型与衣服模型匹配，并且将试衣效果图以网页的方式展现出来。该3D虚拟试衣系统可以根据用户选择的模特性别及身材参数来构造虚拟人体模特，实现试衣展示和价格核算功能，并通过服务器端的数据库保存用户的个人信息和衣服搭配方案，更好地帮助用户选择衣服。

关键词：3D；网页；叠加层技术；试衣系统

中图分类号：TP302 文献标识码：A 文章编号：1009-3044（2017）08-0108-03

1概述

据调查，我国的网民数量已达6.49亿，互联网普及率高达近50%。而网络购物作为一种新兴的购物模式，因其物美价廉而受到不少消费者的喜爱。但是据我们了解，虽然各大网上购物平台都有商品评价机制，且商品具有实物照片，但是作为买家仍然有诸多不便，服装类商品不能试穿，尺码也不统一。导致很多消费者网上购买的衣服并不合身，造成不愉快的购物体验。我们的产品正是基于这一点来开发出的3D试衣技术。利用人体的参数来构成真人3D模型，代替消费者“试穿”其想要购买的衣物，为其买此类商品提供较为可靠的参考。

中国的3D模型市场是一个巨大的市场，越来越多的公司开始向3D产业迈进，但是3D模型应用到服装业的市场几乎空白。现今3D技术发展已经较为成熟，在游戏，影视和动画行业早已投入使用。近几年3D打印技术的迅猛发展更是使3D技术日趋成熟，布料仿真，衣物动画技术的相继出现，使3D虚拟试衣成为现实。而我们的3D试衣系统能为用户选购衣服时提供较大的方便，具有很大的发展空间。

2系统分析与设计

项目的意义在于为消费者的服装购物提供便利，使广大网上消费者能够快速地找到适合自身的衣物。该项目的另一意义在于实现3D环境下的两个不同单位的相互匹配（即3D人体模型与服装之间的匹配），该项目将3D模拟技术与电子商务结合，不仅思想新颖，而且具有很大的市场空间。

本项目设计的3D试衣系统能够多方位地展示服装和模特的三维模型，进而完成虚拟试衣并翻转展示，填补了国内3D虚拟试衣系统的空白，极大地提高了虚拟试衣的真实性。和国外的3D虚拟试衣间相比，本系统也有其突出特点。由于建设性地把服装操控技术引入虚拟试衣间的设计中，3D试衣系统有较好的实时性，并且允许用户对虚拟模特身上的服装做交互式微调，增加了用户试衣的灵活性。

2.1系统需求分析

“基于3D模拟与匹配技术的试衣系统”应具有以下功能：

1）用户登录功能。我们每个进人试衣系统的用户都有自己的账号密码，保证了用户信息的安全性和保密性。

2）性别选择功能。进人试衣系统，用户可自由选择性别，这样可以有不同的衣服可供选择。

引选衣功能。系统要能够比较主观的展示出一系列的衣服，展示的房间里是一个2D仿3D服装库，用户可以通过鼠标或者键盘操作来选择喜欢的服装，以供虚拟试衣之用。

4）角度转换功能。我们的模特试衣效果，可以进行正反转换，这样可以为用户提供更好的视觉体验。

5）模特体型改变功能。不同的人拥有不同的体型，我们为模特设立了三种体型，可供用户自由选择，这样可以看出衣服的真正穿着效果。

6j金额计算功能。本系统会自动计算用户选择衣服的总价格，供用户购买衣服提供参考。

7）搭配收藏功能。系统具备收藏用户衣服搭配的功能，方便日后的查找。

2.2系统框架设计

“基于3D模拟与匹配技术的试衣系统”是使用真人模特实拍图建立男女原始模型，并运行Java、C++、HTML等语言实现界面的生成与后台的搭建。最终可以通过设置人体模型的三围等数据，将衣服套穿在模型上，给用户更好的视觉体验。

该系统采用模块化设计，模块之间是松耦合的，当需求发生变化的时候，向系统中添加和删减模块十分简单。该系统充分考虑到负载平衡的问题，随着访问量的增加，可以通过调整服务器配置参数方面来提供更多的用户在线访问的功能。

此外，系统采用Mysql数据库，即时保存用户的选择和偏好，以便商家和用户分析查看，而且数据的安全性也得以保证。由于用户试穿的访问量比较大，加上有大量的图片素材，可以采用P2P技术进行匹配，保证系统运行的流畅性。

3系统功能设计

3.1系统总体结构

本系统主要由客户端与服务端两部分构成，其中客户端包括登录模块，以及试衣与浏览模块，而服务端主要包括系统管理模块与数据交互模块。系统功能结构图如图1所示。

3.2系统各模块设计

3.2.1客户端系统主要功能如下

3.2.1.1登录与注册模块

在登录界面新用户注册成为会员，检验用户信息是否合法，如不合法，提示用户修改；如合法，将用户登录信息经数据传递模块传送的数据库储存，保证在下次用户登录系统时能正确的验证用户的注册信息。

3.2.1.2试衣与浏览模块

1）服装方面：从数据库中调出已有的服装展示给用户，使用户浏览不同品牌和不同类型的服装，用户可以自由选择服装搭配，在相应的模特上观看试穿效果，以便于用户选择，用户可以收藏自己喜欢的搭配，以便于下次更好的寻找。

2）模特方面：用户可以自由选择适合自己体型的模特，可以从多角度观看衣服在模特身上試穿的效果，为购买衣服提供参考。

3.2.2服务端系统

主要功能如下：

3.2.2.1系统管理模块

系统对用户信息及个人三维模特进行数据存储，确保用户信息不会出现错乱，每当新增加一个用户信息，或服装增加时，都会对数据库进行更新，确保系统稳定运行同时便于管理员对系统进行维护管理。

3.2.2.2数据交互模块

用户在客户端所产生的数据回馈给数据库，数据库根据数据类型进行数据综合管理，再根据数据分析调用相应的衣服反馈给客户端，达到系统有序高效的运转。

3.3效果图展示

3.3.1用戶登录界面

用户可在登录界面登录或注册账号（如图2）。

3.3.2挑选与试衣界面

用户可在左侧的衣物区点击相应的衣物，在右侧的人物模型上浏览相应的情况必要时可进行人物的翻转（如图3）。

4系统的关键技术

4.1B/S结构

B/S结构（Browser/Server），是WEB兴起后的一种网络结构模式。该模式将系统功能实现的核心部分集中到服务器上，客户机上只要安装一个浏览器，服务器安装数据库即可，浏览器通过Web Server同数据库进行数据交互。

本系统采用模块化设计，所有的模块都是P2B/S结构实现，将客户机的压力大大减低，负荷均匀地分配给服务器。此外，B/S结构从根本上弥补了传统的二层模式的C/S结构的缺陷。首先BIS建立在广域网之上，比C/S具有更强的适应范围。其次，B/S的多重结构要求构件相对独立的功能，能够相对较好的重用。而且，B/S建立在浏览器上，有更加丰富和生动的表现方式与用户交流，减低难度和开发成本。

4.2AJAX开发技术

AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重载整个网页页面。

本系统通过XMLHTTPRequest对象，使得JavaScript可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。此外本系统中使用$.ajax（）方法实现试衣间的前端与数据库的交互，采用post请求方式来请求服务器进行处理。

4.3叠加层技术

本系统采用真人模特实拍图建立男、女两个原始模型，如果用户先穿上了一件衬衫，然后在外面再穿上一件西装，需要实现两件衣服叠穿的效果，通过叠加层的技术去模拟衣服搭配的效果，再配合衣服图片制作的时候加入的立体效果和适当的阴影，让试衣效果尽可能的逼真。此外再通过CSS的style属性控制层是否显示来实现是否试穿某件衣服的效果和css的z-in-dex属性控制层的叠加来实现衣服的叠穿效果。

5结束语

该虚拟试衣系统实现了真人人体模型试穿衣服、衣服价格核算以及试衣效果多方位展示的功能，为用户在网购衣服时提供了有效的参考。该系统采用B/S结构取代了传统的二层模式的C/S结构，大大降低了客户机的配置要求和负荷，保证了真正的Thin-Client机制，符合当前网络应用发展趋势，具有较好的发展前景。当然该系统还存在着改进之处，比如通过加入领带、包、饰品等的搭配效果，以及360度旋转、试衣间情景再现功能，让试衣过程更趋完善。