I’m trying to make a web page where users will be able to customize a product similar to how Nike allows users to customize shoes. Could anyone suggest me resources I could use to learn this?
Well, you can start from the very beginning of FCC.
We don’t now what you’re current knowledge-base includes. I don’t want to just list a stack of libraries either because you gain no benefit from that.
What do you know how to make already?
I have made web apps before using react and flak. And I’ve done data analysis and made machine learning models.
What product, and how do you want to display/implement UI for the customisation? Because what it is determines how difficult it is to make.
I will guess (I haven’t looked at the Nike site) that they are using a 3D model of a shoe, rendering it in ThreeJS. Areas of the mesh can be updated pretty easily, so it can be hooked into the UI, and a user can select textures, colours etc. Generally this is the way it can be done most easily, and if you’re product is something generic you should be able to get a hold of models of it without much effort.
1 Like
That’s more or less what I’m trying to do, minus the 3D render. Can you suggest resources I could look at to learn how to make this?
What’s the product?
Can you draw a simplified vector version, or does it need to be photorealistic?
If it’s the former you can use SVG – this just works inline in HTML. So if it is, say, a React app, the SVG vector drawing is just another component/set of components, and you can just adjust the properties of them as you would any other React component. SVG is a bit complicated at times, it’s a big spec, but the basics are relatively easy to learn, start with MDN, and you’ll probably need to be able to draw using a vector drawing program like Illustrator or similar.
If it’s the latter, then you probably want the HTML canvas element. Again, if it’s React, there are libraries to help with rendering a canvas, but at the end of the day you program the canvas part itself. It would allow you to do things to the images you render to it – I can’t really advise what to look at here, it’s been a long time since I had to do anything similar and I can’t remember much bar we used canvas for it. Have a good Google, this is a common want for e-commerce stuff and there will definitely be good solutions (either libraries or articles/tutorials on implementing it).
SVG is likely to be much easier to implenent from scratch, canvas is more likely to have libraries written for it to do what you want.
Note that if it’s just colours, or it’s a specific part of the product that is customizable, SVG works pretty well. You take a photo, put the image in the SVG. You can then position another SVG shape (or image) exactly over the part that is customizable, and either adjust the colour or switch in images or whatever (this is doable with HTML elements as well, but SVG is much, much better for exact positioning)
1 Like