How to change GLTF model path

Questions
,
1

Hello I am a threejs beginner and am trying to change gltf model path onclick so the different model load when you click it. My solution was to set the path to variable and changing it but it did not work.

const modelLoader = “”/models/c2.glb""
loader.load(modelLoader, (gltf) => {…}

  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    if (modelLoader === "/models/c1.glb") {
      modelLoader === "/models/c2.glb";
    } else if (modelLoader === "/models/c2.glb") {
      scene.remove(model);
      modelLoader === "/models/c2.glb";
    } else if (modelLoader === "/models/c3.glb") {
      modelLoader === "/models/c1.glb";
    }

Is there any way to achieve this?
Thank you !

2

Just changing the variable modelLoader does not trigger a loading process. You have to call load() again with the new path.

Consider to move your loading code into a new function that gets the path as a parameter. This makes it easier to reuse the logic. Something like:

function loadModel( path ) {

    loader.load(modelLoader, (gltf) => {

        scene.add( gltf.scene );

        // more logic (e.g. process animations, configure shadows etc.)

    } );

}

Keep in mind that you can reuse an instance of GLTFLoader. So just create it once.