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.
1 Like
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
4 Likes
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
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
1 Like
Yes. Our e-commerce store made product configurator with Vividworks VividWorks: 3D Product Configurator | AR | Try for free
Check out SmartPixels 3D product configurator for fashion luxury brands: https://www.smartpixels.fr/
I felt like 3 things stood out:
- The realism of the 3D product renderings
- The seamless personalization experience
- The easy integration with the e-commerce platform
These are all image configurators, which means you can render in you favourite 3d program and switch images via JavaScript, no need for threejs.
But if you want to develop a 3d solution, trinityjs might be a great place to start! It comes with sample configurator and room planner, as well as a comprehensive backend for uploading and categorizing models, as well as accessory groups, materials, even pricing. And integrates work Shopify, WooCommerce, Prestashop and more.
Under the good it uses the latest version of threejs, and of you choose the developer version you get full access to source code 