Im writing a program in THREE.js where I would like a key press to change the current model loaded. I have gotten this to work fairly simply using the built in mesh's in THREE, but when I try to use the same framework in imported .glb files, it wont work.

Here is my loader function:

let charSelect = "models/charMod.glb";

loader = new GLTFLoader();

function loadModels() {
  const onLoadStatic = function (gltf, position) {
    charModel = gltf.scene.children[2];
    scene.remove(charModel);
    charModel.scale.multiplyScalar(4);
    charModel.position.copy(position);
    modelLoaded = true;
    scene.add(charModel);
  };

  const onProgress = function () {
    console.log("progress");
  };

  const onError = function (errorMessage) {
    console.log(errorMessage);
  };

  const modPos = new THREE.Vector3(0, -3.5, 0);
  loader.load(
    charSelect,
    function (gltf) {
      onLoadStatic(gltf, modPos);
    },
    onProgress,
    onError
  );

My case switch:

function caseSwitch() {
  switch (caseNum) {
    case 1:
      charSelect = "models/idle.glb";
      loadModels();
      break;

    case 2:
      charSelect = "models/kick.glb";
      loadModels();
      break;

    default:
      charSelect = "models/charMod.glb";
      loadModels();
  }
}

As I said, this worked with the default THREE.js mesh, but not with this. Anyone know a fix for this? Thanks :)