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

语言: CN / TW / HK

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

原文链接

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

image.png

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

案例展示链接 - Teamwear Designer 3D (dsign4you.com)

页面展示

起始页

image.png

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

image.png

定制页

颜色面板

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

image.png

image.png

设置效果~~~ - 运动色彩~

image.png

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

image.png

图案面板

衣服二维展开

image.png

裤子二维展开

image.png

我们给衣服添加图案

image.png

加个掘金logo!

image.png

添加文字!

image.png

最终效果

image.png

总结

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

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