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

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

1 个答案: