前端实时换零件预览： niki 官网的定制鞋子的页面里面的更换部件是怎么实现的？

dreamramon2021-8-245

2d 的 https://www.nike.com/cn/u/custom-nike-vaporfly-next-2-by-you-10001100/5126411576#Builder

4c9f850d30fc9761f56372790ebc1fe8.md.jpg

3d 的换 3d https://www.nike.com/cn/u/custom-nike-air-force-1-by-you-10001115/1627520104962?sitesrc=url_share#Builder

上面的链接进去点专属定制

看源码是前端是一个 canvas，公司正好想实现类似的功能，可以在旁边的组件表里一点，中间就实时更换上去看到效果，有同学做过吗？

不知道有没有什么成熟的框架什么的。。。

最新回复 (3)

3dwelcome2021-8-7
引用2楼
2D 看下来就是服务器渲染，然后返回一个半透明的 png，可以随意修改颜色。
https://secure-render.nike.com/is/image/nikeid/?layer=0&src=ir(nikeidrender/vaporflyNextFA21_v3?obj=/s/g14&color=ff003a&show&obj=/s/g13&color=edf0ea&show&obj=/s/g1/00A&show&obj=/s/g4/fly&color=262728&show&obj=/s/g6/fly&color=262728&show&obj=/s/g12/fly&show&obj=/s/g15&color=ff5bac&show&obj=/s/g16&color=2c2d2e&show&obj=/s/g17/waffle&color=292a2b&show&obj=/s/g7/fly&color=ebf8ff&show&obj=/s/g24/ftsolid&color=808080&show&obj=/s/g25/fssolid&color=808080&show&obj=/s/g8/ftsolid&color=ff792d&show&obj=/s/g9/fssolid&color=4cdbdc&show&obj=/s/g10/flace&color=212123&show&obj=/s&req=object&wid=600)undefined&fmt=png-alpha&posN=0,-0.1&icc=AdobeRGB
3D 的话应该是标准的 three.js
jianzhihao19962021-8-7
引用3楼
three.js ？
FakerLeung2021-8-7
引用4楼
three js
游客
5楼

发新帖

主题数
460490

帖子数
11253749

注册排名
2

精彩推荐