Import Another Texture At Runtime Within THREE.JS And GLTF

I'm still pretty new at Three.JS, I'm pretty happy where I have gotten so far, but just need some help. I have an GLTF object loaded into the scene, I want to be able to load diff

Solution 1:

The function loader.load() runs asynchronously and you don't have the model variable immediately set after you call it. So the solution you are looking for is to move the model.material.map = texture; inside the callback function, like this:

loader.load( '../gtf/Box.gltf', function (gltf) {
    model = gltf.scene;
    texture.flipY = false; // for glTF models only
    model.material.map = texture; // <-- move here
    scene.add( model );
});

This will guarantee that you have a valid model object that you can use.

Solution 2:

The problem that you are running into is that the scene that you have assigned as model contains a lot more information than just the mesh and material information. You will need to iterate over the scene object model in order to find the mesh, and then change the material accordingly. While the initial data format that you are using is different, the answers you are looking for can be found in a previous post here:

Change texture of loaded .obj in three.js at runtime

Edit:
@HugoTeixeira is right that assignment of the texture needs to be moved into the callback function of loader.load() (sorry, I totally overlooked this previously), but the actual assignment model.material.map = texture; isn't going to work. You will still need to iterate over the gltf.scene object as mentioned above in order to find the mesh that you want to assign the texture to.