3D Merch Configurator

Hey everyone! :wave: Excited to showcase my latest 3D Configurator project, crafted from my experience working on identical configurators over the past year. This personal project is more than just a display; it’s a dynamic space where I’m planning to add even more features, exploring the creative possibilities that Three.js offers for 3D configurators.

Your feedback is invaluable. Whether it’s a review, critique, or fresh ideas for doing things differently, I’m ready to listen. Let’s work together to elevate this project. On a related note, I’m preparing to craft a detailed article about the creation of this 3D configurator. I look forward to your responses before delving into the specifics. Excited to hear your thoughts! :star2:

demo: https://jersey-designer-new.netlify.app

6 Likes

These are fun to make!
I will see if I can find mine if you need something to compare against. I did not do your method for image UV editor which yours is really neat. One thing I would look at is the performance. On first load on safari it was stuck on 100% indicator while the models were done loading. And then performance was memory leaking.

thanks! well yes the load condition was set 2 times :sweat_smile: that is my fault, i’ll fix that once i have time. Let me know you if have a review for this

can you screenshot me when the memory is leaking? it never happen on my pc

I dont know what the performance bottle neck is, maybe just too many large lextures loading into the view

The “Elements” section should somehow highlight or point in the 3d view what im changing
Im sure in manafactoring they have direct names for these

x2 icon is not a traditional duplicate icon

Is the uploader uploading images? Or is it local? It should be local to start and upload if needed to the server if a sale is finished

you 3d models collar needs work, its seam is right in the front

Thanks for the feedback!
So this app loads fabricjs as canvas texture, the size is a bit unusual it’s 3072. I want to use 2048 but it looks a bit blurry. I’m planning on changing the texture from canvas texture to use png but idk how to make them able to be manipulated.

if u check here, the icons are from there, and you can see how sharp their texture. I’m guessing it’s using png correct?

Sharpness comes down to power of two texture and what was used to compress it down in the texture buffer and the render type assigned to it.

png is a raster format that holds lots o bits I think its 32 so its alpha gradient is smooth also not lossy compression like jpeg.
Im sure theres more, but once its imported its in a different format that the broswer and Webgl uses, this i dont recall its name

to get speed you want the texture to be in webgl buffer, three does that for you, past that i dont recall all the nity details, someone else will have to chime in. Its good to read through the webgl docs or a tutorial https://webgl2fundamentals.org

its all the same under THREEs hood just in a different method of api

NOW, preloaded models from GLTF, there is a new(old) spec for compression textures that blender does not support yet, but you can post process. Youll have to find the link and name to it
Its made for big scenes like meta verse walking galleries

I got it, i know there has to be a better way since my method is a not efficient. Although for my clients they said it still met their needs but i just want to have the closest demo to owayo.

Owao didn’t use png then? I inspect their code and i found texts converted to png, so i just guess that the pattern is using png aswell. Are they also use canvas texture per your assumption?

it just matter how optimized png is, how many colors in its images design, less color = less file size. Sharper alpha edge = less file size
They could also be using the compressor im hinting at. But also when you scroll out youll notice the normal maps stop displaying.
Lots of little things

I’ll dive into the optimization or compression again, thanks for the feedback! :+1:
Ah also, if u notice on the network tab, mine was loading an OBJ file, but owayo loads .bin file, what is that and is there a resouce to read for that?

its a gltf file with its assets

Hi Nao, what the solution to contact you in private ?

Hello. The functionalities you have designed in the configurator are very interesting. Could you please get in touch with us?