CODEWITHSUNDEEP
javascriptcolorsthree.jsgltf
Jaxon Bruce Willard
Jaxon Bruce Willard

Reputation: 31

Three.js gltf specifying object parts

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

Upvotes: 2

Views: 196

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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.:

https://threejs.org/examples/webgl_interactive_cubes

Upvotes: 1

Related Questions