Change Textures with fade effect

[canberka]

I am trying to do some Augmented Reality and 3D Viewer with configurator with Google Model viewer... and want to improve as much as i can..

https://www.basebros.com/config-1.html

If u check out the link u can see buttons can change the different part of model texture...

Now, i am trying to can i change the textures with fade in fade out effect??

like this video... https://drive.google.com/file/d/1qPbdGDuo8fEMOXkKbdXRUaC4cz37tukB/view?usp=sharing

this is webgl or something not web base...

So this is my buttons code

 <div class="grid-container2">

  <div class="container">
    <img id="img5" src="images/agacsec.png" width="15%" alt="Homepage">
  <label>
    <input type="radio" id="birinci1" name="kol" onclick="Pris();" value="textues/kol/4/tcicdebc_2K_Albedo.jpg" checked>
    <img src="Assets/kol1.png">
</label>

<label>
    <input type="radio" id="birinci2" name="kol" onclick="Pris();" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
    <img src="Assets/kol2.png">
</label>

<label>
    <input type="radio" id="birinci3" onclick="Pris();" name="kol" value="textues/kol/1/teqbcizc_2K_Albedo.jpg">
    <img src="Assets/kol3.png">
</label>

onclick="Pris(); function is not about it 3d viewer

and my addeventlistener is

const modelViewerTexture = document.querySelector("model-viewer");
    
        modelViewerTexture.addEventListener("scene-graph-ready", (ev) => {
    
            let material = modelViewerTexture.model.materials[0];
            let material1 = modelViewerTexture.model.materials[1];
            let material2 = modelViewerTexture.model.materials[2];

document.getElementById('birinci1').addEventListener('click', (event) => {
                material1.pbrMetallicRoughness.baseColorTexture.texture.source.setURI(event.target.value);
            });
            document.getElementById('birinci2').addEventListener('click', (event) => {
                material1.pbrMetallicRoughness.baseColorTexture.texture.source.setURI(event.target.value);
            });
            document.getElementById('birinci3').addEventListener('click', (event) => {
                material1.pbrMetallicRoughness.baseColorTexture.texture.source.setURI(event.target.value);
            });

i tried to add fadeouteffect like ('click',fadeouteffect,(event)=> .... but button not work in this situtation..

I just to learn is this possible to change values with fade effects ..

Can you show me the true way?

Thank you for everything.

[elalish]

Yes, in fact we do this in our editor when you select a new material, to show which part of the model you've selected: https://modelviewer.dev/editor/

We do it by changing the baseColorFactor during requestAnimationFrame, which is multiplied against the texture. Actually, we also fade the emissiveFactor.

[canberka]

okey you are right how did i miss it ... Thanks a lot @elalish u are my favorite Maintainer