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

语言: CN / TW / HK
时间 2023-01-05 00:15:07
主题:

在逛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°视觉观看效果也不一样，可以设置！ - 定制分为调色和添加图案。

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

「」