Recently, I encountered an interesting challenge with a scene imported from a glb-file using GLTFLoader. The scene features various objects of guys in different colors, each with its own material (RedMat, BlueMat, GreenMat, etc) created in Blender. Interestingly, all materials utilize the same texture file (this one), acting as a color palette and assigning unique hues to each object based on their UVs.
https://i.sstatic.net/YEkG1.png
The rendering in my three.js scene is going smoothly, accurately representing the colors of each object from the imported glb-file. However, I faced a desire to manipulate the materials of individual objects - like changing the red guy's material to that of the green guy.
new GLTFLoader().load('myfile.glb', function (gltf) {
const redGuy = gltf.scene.children.find(x => x.name === 'RedGuy');
const greenGuy = gltf.scene.children.find(x => x.name === 'GreenGuy');
redGuy.material = greenGuy.material; // Anticipating the red guy to turn green, but unfortunately nothing changes
// On the other hand,
redGuy.material = new THREE.MeshPhongMaterial({color: '#FF0000'});
// does work, yet I prefer to utilize the pre-set Blender materials stored within the glb-file
});
Curiously, inspecting redGuy.material and greenGuy.material reveals striking similarities in appearance despite having different names and ids.
This snippet provides a glimpse into my dilemma, offering insight into the issue at hand. Should more details be required, I am open to sharing the complete project or the Blender file for further analysis.