【網站分享】- 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°視覺觀看效果也不一樣,可以設置! - 定製分為調色和添加圖案

我需要安靜下來,想象未來怎麼安排。時間飛快時間飛快,來不及抹去昨日塵埃 - 《遠行 - 李宗盛》