How do i change texture of ".fbx" model in three js library at runtime?
The main problem with applying a texture to an .FBX model, is that the .FBX is loaded as a group of sub-models, each with their own materials. The way to replace these textures is to traverse the model structure:
// FBX loader returns a group containing a multiple sub-objects. Traverse and apply texture to all.
group.traverse(function (child) {
if (child instanceof THREE.Mesh) {
// apply texture
child.material.map = texture
child.material.needsUpdate = true;
}
});
For a working sample, I've modified the default three.js FBX example to demonstrate this:
http://www.eponalabs.com/experiments/FBXReplaceTexture/fbx_replace_texture.html
When you press the button, the code fragment above is used to replace the textures with a placeholder image from Unsplash.it.