How can I get the default texture uri from a material?

[discodevl]

Hi, I need to get each default texture from the materials of the model viewer, I managed to get them once I set the texture with material.['texture'].texture.source.setURI() method, before setting the uri it gives me undefined. How can I get this uri from the default texture of the modelViewer?

[ghost]

Textures loaded from a .glb have no URI because they are loaded from a buffer inside the .glb so there is no way to address them directly. You can check the type of the texture (modelviewer.model.materials[0].normalTexture.source.type for instance) if it's 'embedded' there will be no URI, and if it's 'external' there should be a defined URI.

What are you aiming to do? I might be able to provide some other suggestions with a little more detail.

[discodevl]

It works :D
Thank you!

[canberka]

Hi, i tried these codes but not worked. I am failing somewhere hard but not get it where is it ? Can you help me?

<img id="thumbnail" src={thumbUrl} />
<script>
  const modelViewerTexture = document.querySelector("model-viewer#sphere");
  modelViewerTexture.addEventListener("load", (ev) => {
  let material = modelViewerTexture.model.materials[7];
   let thumbUrl =await material.baseColorTexture.texture.source.createThumbnail(128, 128);
})
</script>

this one" Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules"

<script>
 const modelViewerTexture = document.querySelector("model-viewer#sphere");
modelViewerTexture.addEventListener("load", (ev) => {
   (async function(){
let material = modelViewerTexture.model.materials[7];
    let thumbUrl =await material.baseColorTexture.texture.source.createThumbnail(128, 128);
})})

</script>

this one get nothing

<img id="thumbnail" src={thumbUrl} />
<script>
const modelViewerTexture = document.querySelector("model-viewer#sphere");
modelViewerTexture.addEventListener("load", (ev) => {
  let material = modelViewerTexture.model.materials[7];
 let thumbUrl =material.baseColorTexture.texture.source.createThumbnail(128, 128);
})

</script>

this one " Uncaught TypeError: Cannot read properties of undefined (reading 'texture')"

[elalish]

This is just JS debug; you may need to read up on how async and await are used. The last error makes it sound like your eighth material has no baseColor texture. You might try opening this GLB in our editor to see if that gives you any insight.

[canberka]

thanks for quick response i will read up asap ... if it is possible to help @discodevl i really would be glad

last error in editor is @elalish

[discodevl]

Im working with reactJS so maybe the exact same code wont work for you but I did this:

const material = document.querySelector('model-viewer').model.materials[0];

async function defaultThumb() {
    const promise = await material.pbrMetallicRoughness.baseColorTexture.texture.source.createThumbnail(256,256);
    return promise;
  }

I used the useEffect hook from react to assign to source the value of defaultThumb().
The code inside useEffect will run once the page is rendered.

useEffect(async () => {
    const source = await defaultThumb();
  }, []);

Then I just have to put the source inside the src on the img tag.

<img src={source} />

Not the cleanest way to do it but it worked for me

[discodevl]

After doing that, I came up a doubt. How can I revert the texture to the default one properly? After changing the texture if I try to set the texture with setURI() method passing thumbUrl the model comes pixelated, I tried to change the values of the createThumbnail() but the result still bad. How can I 'revert' the texture?

[ghost]

A couple of things, you may need to make the 'thumbnail' larger, else it will be pixelated, you probably don't want to apply a small thumbnail back to your model. So if your source texture is 4096x4096 (or whatever it might be) then you want to go with that resolution.

To revert the texture you need to save a reference to the original texture.

const saveTexture = material.emissiveTexture.texture;
// revert later on
material.emissiveTexture.setTexture(saveTexture);

[buddy90210]

> To revert the texture you need to save a reference to the original texture.
I am saving the texture in const saveTexture and then after changing the texture of the material I want to return the texture to default, but I have an error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Symbol(threeTexture)').
Default texture is inside the .glb, when i change this texture i set external texture image.

[elalish]

@buddy90210 Can you share a repro URL? It's possible this is a bug.

[buddy90210]

Oh, sorry! I forgot add 'await' to my function.

[adesidaseyi]

For anyone working with Diffuse textures and trying to revert the base color texture of their model, following a similar approach to what was discussed earlier (saving a reference to the original texture object), you could do something like this:

// 'baseColorTexture' is the channel for Diffuse textures
const saveTexture = material.pbrMetallicRoughness['baseColorTexture'].texture; 

// revert later on
material.pbrMetallicRoughness['baseColorTexture'].setTexture(saveTexture);

[ColinCollins]

createThumbnail the result with different color space make texture become dark!
First serveral days, I still could got the source.uri, but when few days age, the datas beceme undefined. I didn't know what's wrong?

model-viewer: 2.1.1

[elalish]

I can't quite follow what you mean - can you show a comparison to what you would expect to see? Do you have a repro link? When you say something changed after several days, do you mean you changed the MV version?

[WadeMorrison]

Is it possible to revert a material using the originalGltfJson? I'm trying to make it to where if I swap to a specific material type, it will automatically swap another part back to it's original material because the newly "checked" material cannot be created/sold with that combination.

Here is what I'm trying to achieve, I've got it to swap the material on DrawerBody if a lacquer color is chosen, but when I choose a Grasscloth material, it still swaps it to that material instead of back to the default "wood" material.

const swapDrawers = (event) => {
        const modelViewer = document.querySelector('model-viewer#model-viewer')
        const material = modelViewer.model.getMaterialByName('Drawer');
        const drawerBody = modelViewer.model.getMaterialByName('DrawerBody');
        const ogDiffuse= modelViewer.originalGltfJson.textures[4].source;
        const checkedMat = document.querySelector('[data-type]:checked').getAttribute('data-type')
  
          const diffuseSwap = async (channel) => {
            const diffuse = await modelViewer.createTexture(event.target.getAttribute('value'));
              if (channel.includes('base')) 
              {
                material.pbrMetallicRoughness[channel].setTexture(diffuse);
                if (checkedMat === 'Lacquer') {
                  drawerBody.pbrMetallicRoughness[channel].setTexture(diffuse);
                } else {
                  drawerBody.pbrMetallicRoughness[channel].setTexture(ogDiffuse);
                }
              }
            }
                
          const normalSwap = async (channel) => {
            const normal = await modelViewer.createTexture(event.target.getAttribute('data-value'));
              if (channel.includes('normal')) 
              {
                material[channel].setTexture(normal);
              }
            }
                
          const ORMSwap = async (channel) => {
            const ORM = await modelViewer.createTexture(event.target.getAttribute('data-value2'));
              if (channel.includes('metallic')) 
              {
                material.pbrMetallicRoughness[channel].setTexture(ORM);
              }
            }
  
        diffuseSwap('baseColorTexture');
        normalSwap('normalTexture');
        ORMSwap('metallicRoughnessTexture');

        if (checkedMat !== 'Lacquer') {
          drawerBody.pbrMetallicRoughness['baseColorTexture'].setTexture(ogDiffuse);
        }

        console.log("swapping material")
      };
     ```

[elalish]

Yes, we do basically exactly this in our editor. Feel free to look at the materials_panel code in our space-opera package.

[elalish]

It's all under the same open license, so you can just fork space-opera if you wanted to.

[WadeMorrison]

Okay I will take a look, I appreciate it!