如何通过DAT.gui下拉选择动态加载Three.js的GLTF模型

我几个月前开始接触Three.js，具备基础JS知识，大部分代码改编自Three.js Examples。
我希望实现从下拉列表选中对应模型后加载的功能，同一时间仅展示一个模型，因此不想为每个模型单独新增GLTF加载器，打算仅使用1个GLTF加载器，根据用户在下拉菜单中选择的选项动态变更加载路径。

变量定义 #

let pathSelected, pathHe, pathCat, pathGears; 
pathHe = ('./MODEL/he.gltf');      
pathCat = ('./MODEL/cat/cat.gltf');                    
pathGears = ('./MODEL/gears/gears.gltf');  

GLTF加载逻辑 #

function init() {
...
  loader = new GLTFLoader();
  loader.load(pathSelected, function (gltf) {
    gltf.scene.traverse(function (child) {
      if (child.isMesh) {
        children.push(child);
      }
    });
...
}

DAT.GUI控制面板逻辑 #

function createPanel() {
...
var objSelector = objectShow.add(settings, 'modelOptions', ["HE", "Cat", "Gear Box"]).name("Seclect").listen();

  objSelector.onChange(function (value) {
    var value = settings.modelOptions;
    if (value == "Heat Exchanger") {
      pathSelected = pathHe;
      console.log('Dropdown: HE', pathSelected);
    }
    else if (value == "Cat") {
      pathSelected = pathCat;
      console.log('Dropdown: Cat', pathSelected);
    }
    else if (value == "Gear Box") {
      pathSelected = pathGears;
      console.log('Dropdown: Cat', pathSelected);
    }
    else { ... }
  });
...
}

访问密码：MellowMonk@123

内容的提问来源于stack exchange，提问作者Mellow Monk