How to list and replace texture is a loaded GLTF model?

Is there a way to the get the textures in a scene, loaded using a GLTFLoader, and also update them live?

I have a model with a number of place holder textures and I’d like to be able to update them dynamically based on images a user has uploaded. The user would then be able to adjust the positioning of the image in an editor in the page and have the model reflect that change live.

You can try something similar to this:

model.traverse(child => {
  if (child.material && child.material.name === 'placeholder') {
    child.material.map = new TextureLoader().load(replacementUrl);
  }
});

There are a few notes on https://threejs.org/docs/#examples/en/loaders/GLTFLoader that you’ll want to remember:

  • set texture.flipY = false to match the glTF UV coordinate system correctly.
  • set texture.encoding = THREE.sRGBEncoding if the texture contains color information, like .map

Based on the above, can I presume that any child.material with a map attribute represents an image? At the moment I am using models provided by a third party, so the placeholders haven’t necessary been labelled in a way that would make them easy to identify, and I don’t want to start manually modifying the scene.gltf file, partly because I am not sure of the impacts.

I did iterate over the children as above, and logged the entries if the there was a material attribute. Here I saw the that some entries had a populated map property with an image property. I imagine I could take that image and render it in a 2D canvas if I want to be sure of its contents?

Thanks for the heads-up on the gltf notes.

Yes, although you might find this easier to do in a tool like Blender or https://gestaltor.io/ or https://threejs.org/editor/. These tools can open a glTF file, isolate the textures, and export back to glTF with changes.