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

Home Sign Up Sign In

This topic created in 1757 days ago, the information mentioned may be changed or developed.

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，公司正好想实现类似的功能，可以在旁边的组件表里一点，中间就实时更换上去看到效果，有同学做过吗？

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

3 replies • 2021-08-02 21:44:00 +08:00

1

3dwelcome

Aug 2, 2021

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

2

daz996

Aug 2, 2021

three.js ？

3

FakerLeung

Aug 2, 2021 via iPhone

three js

About · Help · Advertise · Blog · API · FAQ · Solana · 1003 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 46ms · UTC 19:01 · PVG 03:01 · LAX 12:01 · JFK 15:01
♥ Do have faith in what you're doing.