【网站分享】- Three.js - 衣服定制系统

lxf2023-03-18 19:49:02

在逛Three.js论坛的时候发现的,感觉很有意思,个性化定制衣物,可以调节衣服上不同部位的颜色,还可以添加文字、图案到衣服模型上。

原文链接

Sportswear Design Configurator - Showcase - three.js forum (threejs.org)

【网站分享】- Three.js - 衣服定制系统

【译】 - 我们的产品定制器,可以用于在短袖、袜子、裤子、夹克等物体上,添加图案、文字、图片。这些添加的图案是用svg格式保存的。canvas使用的是2D矢量库(fabric.js),在3D模型上把canvas当作贴图使用

案例展示链接

  • Teamwear Designer 3D (dsign4you.com)

页面展示

起始页

【网站分享】- Three.js - 衣服定制系统

开始页面,可以选择四种衣物,足球、骑行、徒步、日常。根据不同的场景,展示不同的衣物。

【网站分享】- Three.js - 衣服定制系统

定制页

颜色面板

选择 足球(运动装) - 宽松

【网站分享】- Three.js - 衣服定制系统

【网站分享】- Three.js - 衣服定制系统

设置效果~~~

  • 运动色彩~

【网站分享】- Three.js - 衣服定制系统

近距离还能看到针织效果!

【网站分享】- Three.js - 衣服定制系统

图案面板

衣服二维展开

【网站分享】- Three.js - 衣服定制系统

裤子二维展开

【网站分享】- Three.js - 衣服定制系统

我们给衣服添加图案

【网站分享】- Three.js - 衣服定制系统

加个AdminJSlogo!

【网站分享】- Three.js - 衣服定制系统

添加文字!

【网站分享】- Three.js - 衣服定制系统

最终效果

【网站分享】- Three.js - 衣服定制系统

总结

总结一下收获!

  • 根据不同使用情况,可以有不同的衣物选择,案例根据的是运动方式来区分。
  • 衣物分为紧身、宽松、V领等。
  • 衣物图案,可以使用canvas贴图到3D模型上,还需要找点案例。。
  • 衣物展示在不同视角、不同灯光会有所不同!还有360°视觉观看效果也不一样,可以设置!
  • 定制分为调色和添加图案

我需要安静下来,想象未来怎么安排。时间飞快时间飞快,来不及抹去昨日尘埃 - 《远行 - 李宗盛》