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

Questions
,
1

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.

2

You can try something similar to this:

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

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
1 Like
4

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.

5

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.