three.jsfbx

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


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


Solution

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

    Running man with texture replaced