使用dat.gui在three.js中的多个3d模型之间切换

Question

我试图在我的three.js场景中呈现的多个3d模型（加载了OBJMTLLoader.js）之间切换。 我正在使用dat.gui创建一个模型名称的下拉列表，当选择一个模型名称时，场景会将相应的obj模型添加到场景中并删除原始模型。

在这里，我要加载2个单独的模型，然后将第二个模型添加到场景中，然后设置dat.gui控件：

    var loader = new THREE.OBJMTLLoader();

    loader.load("../assets/models/boardlego.obj", "../assets/models/boardlego.mtl", function (obj2) {
        obj2.name = 'lego2';
        });



    loader.load("../assets/models/boardlego2.obj", "../assets/models/boardlego.mtl", function (obj) {
        obj.name = 'lego';
        scene.add(obj);
    });

    camControl = new THREE.OrbitControls(camera, renderer.domElement);

    // call the render function
    render();

    //set up dat.gui controls
    control = new function () {
        this.Templates = 'shortboard';
        }
    addControls(control);
    }

然后，addControls函数：

function addControls(controlObject) {
    var gui = new dat.GUI();
    gui.add(controlObject, 'Templates', ['shortboard', 'longboard', 'fish', 'funboard', 'simmons', 'parallel', 'gun']).listen();

两种模型都已加载，但只有一个添加到场景中。 更改“模板”控件时是否可以添加其他模型？ 我试图创建一个单独的函数updateboard（）并在render函数中调用它，如下所示：

function updateboard() {
    if(controlObject.Templates === "longboard"){
        scene.add(obj2);
    }
}

但这没有用。 我还尝试在render函数中设置if语句：

function render() {
    renderer.render(scene, camera);
    if (scene.getObjectByName('lego')) {
        scene.getObjectByName('lego').scale.set(control.Length, control.Thickness, control.Width);  
    }

    if(control.Templates === "longboard"){
        scene.add(obj2);
        }

但这也不起作用。 任何帮助将不胜感激！ 或者，如果您可以找出一个可能也有帮助的示例！ 提前致谢。

Answer 1

将对象加载到array（）;

 var my_models();
 var loader = new THREE.OBJMTLLoader();

     loader.load("../assets/models/boardlego.obj", "../assets/models/boardlego.mtl", function (obj2) {
      obj.name = 'lego2';
     my_models.push(obj);
    });

    scene.add(my_models[0]); // 0 would be the first model 1 is the second