3D configurator

I am looking at this example 3D Configurators - Sketchfab and there is a button that allows to change the feet style, how exactly is this done, a new mesh is added in its place?

If there are any examples about this I would appreciate the help, I don’t understand how this is done :slight_smile:

Probably just having two different meshes and make them visible/invisible.

This in R3F but this is how i would implement it: https://youtu.be/wW0XwNhrDFQ?si=mtY7YPt1GWol4baO

1 Like

Thank you, I will watch it but I don’t want to work with react there are too many layers already… I know is easier but I prefer to have as much control as I want over my work and react has its own bugs and issues…

1 Like

I understand fully, but the concept is exactly the same as what you want to do:)

Yes, that is the idea, thank you!

If parts have the same shape - just swap materials (see 1:11)
If parts have different shape - use invisible “socket” meshes, to define positioning, and then add / remove children meshes from these sockets to use different model depending on the configuration (see how unreal does it for an example.)

1 Like

Though you don’t want to use react, it is the same in its essential point.
You can control the material with opacity to hide something.
please toggle opacity of two foots to 1 or 0.

1 Like

in my opinion vanilla three is OK for simple viewers. a configurator is a state machine. once you attempt to solve that with mutation :skull: and querying :jack_o_lantern:, it will cause complexity.

i know you just want an answer, but it isn’t simple. android and the web were the last platforms using layout inflation (mutation + query), and they have stopped. it is alive in threejs, but for no good reason.

a framework merely establishes clean dataflow: state → view, the view on the screen is the outcome of state, if state changes, so must the view. here’s one example:

the full code is 77 LOC. this would be 1000-2000 lines in vanilla, madly complex code where everything is tied to everything else.


Regardless of using a framework or not — you would also need to create a model that is ready for configuration. I’d guess that most people do in tools like Blender, creating a model with different compatible parts, un-colored textures (so that material.color chosen in UI can multiply with the textures), and strict naming conventions for each part. Then it’s easy to swap things out, however you want to build your web app.


Yes this is the idea, I understand now.