I have a project where we want to display 3d renders of iron doors using gltf models in three.js. They will look similar to this: iron door example. I need to be able to change the color of just the frame, and not the glass pane in the door. How can I identify and change the color of just the frame, keeping the glass pane the same color? Thanks
1 Answers
It's best if you solve this issue during the design phase of the object. Meaning when you are creating your asset in a DCC tool like Blender, you have to ensure that the door model consists of multiple components (frame, glass pane, handle etc.) with possibly unique materials.
In the app, you can select the individual components via raycasting, extract the respective material and then change the color value. In this way, other components won't be affected by this operation. The official three.js examples provide some code such a workflow e.g.:
Related