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

Question

我正在尝试在我的 three.js 场景中呈现的多个 3d 模型（加载了 OBJMTLLoader.js）之间切换。 I'm using dat.gui to create a dropdown list of model names and when one is chosen, the scene will add the respective obj model to the scene and remove the original one.

在这里，我正在加载 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() 并在渲染函数中调用它，如下所示：

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

但它没有用。我还尝试在渲染函数中设置一个 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