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

[dreamramon]

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

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

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

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

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

[3dwelcome]

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

[jianzhihao1996]

three.js ？

[FakerLeung]

three js