Change model assets path

Questions
1

Good day.

Have code.

    const loadingManager = new THREE.LoadingManager();
loadingManager.setURLModifier(loadAssets);

function loadAssets(url) {
     return url;
}


let loader = new THREE.GLTFLoader(loadingManager);
loader.load('img/metal/scene.gltf', handle_load);
function handle_load(gltf){
     scene.add( gltf.scene );
}


let gallery = ['img/metal/textures/initialShadingGroup_baseColor.jpeg','img/metal/textures-1/initialShadingGroup_baseColor.jpeg','img/metal/textures-2/initialShadingGroup_baseColor.jpeg'];
let current = 0;
document.addEventListener('click', function () {
     current++
     current = current % gallery.length;

     loadingManager.setURLModifier(loadAssets);
     function loadAssets(url) {
          if ( url === 'img/metal/textures/initialShadingGroup_baseColor.jpeg' ) {
               url = gallery[current]
          }
          return url;
     }
     loader.load('img/metal/scene.gltf', handle_load);

})

I have a model with changing textures. Everything is fine, everything works.

101
1011295×955 99.7 KB

102
1021302×1040 153 KB

The question is, is it possible to change not the textures themselves as I did, but the path to them?
'img/metal/textures/ and 'img/metal/textures-1/

because the textures themselves can have 2 or 3 files.

2

Have you tried using Loader.setResourcePath()? With this method you can define a path that is used to load external resources like textures or binary files.

In this way it is not necessary to modify URLs like demonstrated by your code. You can simply define multiple directories with different sets of resources and use the above method to point to one of them.

1 Like
3

thanks, I will try

4

tried it - it works! the paths of course need to be rewritten a little differently, but this is what i need.

document.addEventListener(‘click’, function () {
loader.setResourcePath(‘img/metal/textures-1/’);
loader.load(‘img/metal/scene.gltf’, handle_load);
})

1 Like