setURI preloader

[89282222840]

I have two buttons:

< a id="color1" >1< /a >
< a id="color2" >2< /a >

When I click on them, the textures and normals maps are switched by the script:

const modelViewerTexture = document.querySelector("model-viewer.colorista");
modelViewerTexture.addEventListener("scene-graph-ready", (ev) => {

document.getElementById('test1').addEventListener('click', function() {
  modelViewerTexture.model.materials[4].pbrMetallicRoughness.baseColorTexture.texture.source.setURI("tex1.png");
  modelViewerTexture.model.materials[4].normalTexture.texture.source.setURI("normal1.png");
});

document.getElementById('test2').addEventListener('click', function() {
  modelViewerTexture.model.materials[4].pbrMetallicRoughness.baseColorTexture.texture.source.setURI("tex2.png");
  modelViewerTexture.model.materials[4].normalTexture.texture.source.setURI("normal2.png");
});

});

How to make a preloader?
It is necessary that the loading animation is shown until the selected textures are applied to the model.

[elalish]

I think there are several ways you could solve this. Simplest might be a custom progress bar using our <slot>? You can find an example by clicking "Download Scene" in our editor, which outputs some HTML and JS for a custom progress bar among other useful things.