Hey everyone! 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!
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 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!
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?
Hey everyone! I’ve been busy enhancing my 3D Configurator, and I’m excited to share what’s coming!
New Features Rolling Out: Gradient Colors – Smooth, dynamic color transitions Pattern Support – Apply custom patterns for more personalization Proprietary 3D Binary File (.nds) – Preventing anyone to leverage our/client’s custom 3d models New UI – Cleaner, more intuitive interface for a better experience Save & Load Design – Store and retrieve designs from the backend Viewer Mode Toggle – Enable/disable configurator to show only the 3D viewer Export Design to SVG – Scaled accurately to the real product for precision Multi-Product Support – Users can now design multiple products at the same time! Custom Loader – Using custom NDSLoader
I also built a Blender add-on to streamline exporting custom 3D models directly into our proprietary .nds format, making it super easy to integrate new designs into the configurator!
These updates will be available tomorrow! Can’t wait to share them with you all! Stay tuned, and let me know what you’re most excited about!