How to apply texture for .fbx model in three.js?

Question

How do i change texture of ".fbx" model in three js library at runtime?

Answer 1

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.