Is it possible to create a dynamic product configurator?

I saw a product configurator Tailor Store and wanted to know how i can create my own using Three.js, I thought i could create different models and switch them depending on what users picked, but then i noticed you could add pockets, plackets, curfs and wanted to know how they achieved that, was it through layers, or uv texturing (and if it is UV texturing, that means they have alot of textures) or are there other ways using three.js.

I think you can have one standard 3d model which never change throughout the lifecycle of your application.
Then you can have all different 3d models which are configurable/replaceable. ( like addon parts )
And then structure your application to come up with one default combination of the standard model + configurable model.

Finally, add user interactivity to handle all the possible combination they wish to try out.

This concept can have a requirement of large set of 3d models and textures. So make sure to wisely create the 3d models ( concentrating on low polycounts ) and handle disposals of the component when not in use.

First of all, why do you think, that this “tailorstore” was made with Three.js? So far, what I see in the element inspector in FF, there are just sets of .jpg and .svg for collars, cuffs, buttons, pockets and all the other stuff.

This is a real 3d product configurator:

1 Like

Even though it isn’t made with Three.js, are you saying as powerful as Three.js is, it cannot replicate something like this ?

I really do not think this website could be built on SVGs and JPGs, it is to dynamic, and there would be alot of pictures which have to be stored, which isn’t a very good design. I am not saying it was built with Three.js, I just feel that shouldn’t THREE.JS be able to build something like this, as powerful as it said to be ?

THREE is a render engine, you need to implement anything else yourself, but you can utilize THREE for the visualization/rendering.

I’ve made one with THREE too http://ruku-konfigurator.de

1 Like

please can you explain the addon part much clearly ?, thank you.

my question to you now Fyrestar is, how could they have been able to change each part of the clothes

are they like individual meshes (components) joined together ???

Please don’t make multiple posts and use the edit function instead.

Your example isn’t a realtime 3D rendering but seems like pre-rendered images assembled together.

1 Like

@Fyrestar
:beers: That’s exactly what I’ve meant here, but our fellow topic starter even doesn’t want to check it:

@Fyrestar noted. loool, @prisoner849 I just didn’t want to believe it wasn’t created with Three.js. but now i am certain but still curious tho, to 1. how they could change the fabric of the cloths , 2. how the button thread’s color could be changed 3. How The created a contrast feature for the collars and the curfs. I checked the inspector of Chrome and opera and all I saw where the already pre-rendered image which was the final output of any option i clicked, while the SVGs where used as the option icons.

I wanna do the very same thing that you showed as an example and I wonder if it can be done with three.js as well.

Why do people keep getting the wrong idea? The question is “Can we make/achieve that with three.js?”

I get that the tailorstore example is building models with pre-rendered images, but can we also replicate one like this with three.js?

Please, help me out !! THANK YOU!!

this is great. I assume not, but would it be possible to see the code or at least know how it is done?

Awesome man, can you help me with shirt customization