基于HTML5实现的在线3D虚拟试衣系统(试衣间)解决方案

原创 2016年09月09日 00:37:37

3D虚拟试衣系统的使用场景主要是在线电商或数字营销,为品牌服装、服饰、饰品添加高端3D虚拟购物动效,提升用户感官体验和交互体验。

要研发这样的在线系统,有2个方向,一个是使用Flash或Unity3D这些第三方网页插件,第二个就是纯Web方案(也就是HTML5/WebGL)。

Flash在移动端有死穴,Unity3D所依赖的API在新版本Chrome中得不到支持(V42以后),而H5是行业开放标准是现在也是未来。因此我们选择基于H5来实现这个目标。


踏得网基于网页/HTML5在行业内独家研发了一套在线3D虚拟试衣系统,目前是功能演示/测试版本,包含如下基本功能:

1. 纯Web/HTML5版本,无需用户安装任何插件,跨平台跨设备终端,只要是支持WebGL规范的现代浏览器就可以运行;

2. 360°浏览模特和衣服,支持交互式缩放、旋转、平移;

3. 可修改模特参数,以匹配自己的身材体型;

4. 可选择不同的衣服进行试穿;

5. 可选择模特的肤色;

6. 可选择环境参数,如光照颜色、是否有风、是否需要聚光效果、舞台是否需要自动旋转等;

如果选择有风的环境,则呈现自然风吹拂摆动/波动特效。


产品演示截图如下:


一大波更为有趣的功能即将来袭:

添加3D场景(室内外)构建、虚拟T台秀(虚拟走秀)和更多模特、衣服模型和动作的制作,以及和VR/AR技术的结合。


小视频功能演示:

http://wow.techbrood.com/fiddle/31345?vm=full


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

公司,工作,我...

最近想要离开公司的想法越来越强烈了,想的很多,也思考了很多......    想想当初毕业时对社会的憧憬还有自己的抱负,现在已经所剩无己了.虽然说做程序员这一行重要的是技术,但是现在感觉到一个公司的管...

2016年度10大HTML5动画

踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。技术全面覆盖HTML5/CSS3/SVG/WebGL/ES6。

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

Three.js学习笔记---我和小伙伴都惊呆了

什么是Three.js three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场...

论开发能力提高之道-御剑飞升的实现

最近玩了玩RPG,突然对开发能力的提高之道有了些想法,想想自己走过的路,确实如此。正文:  一个剑客要想修炼成为可御剑飞升的剑仙,就要提高自身素质和用剑的本领,开发人员也是一样,我们的"剑"就是技术。...

探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS

介绍在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, 球体, 和平面.娱乐场演示场景2 - 七个基本形状/网格我怎么做到这个 ?一个简单的方法是通过访问娱乐场演示场景 02...
  • AceWay
  • AceWay
  • 2016-05-21 22:43
  • 9674

通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了速查手册似乎就理解了。实际上很多从业人员并没有深入理解业界为什么要推出HTML5系列...

jQuery语法高亮插件,代码着色,页面代码着色

1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮。支持的语言包括: Python Ruby Perl PHP XML HTML ...

◥※温州办证13527667712/QQ958909309※◤

专业的办证公司,信誉至上的办证公司,我们有实力让你满意!联系电话◥※办证13527667712/QQ958909309※◤        ◥※办证13527667712/QQ958909309※◤办证...

继续补充1

A1MONITOR 2001 V5.6.2-Code:Y4176 AbsoluteFTP 2.0.0 Beta 4-Name:CZY Compan...
  • evalyl
  • evalyl
  • 2006-02-03 20:21
  • 1397
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)