Toggle between multiple 3d models in three.js using dat.gui

Question

I'm trying to toggle between multiple 3d models (loaded with OBJMTLLoader.js) rendered in my three.js scene. 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.

Here, I'm loading 2 separate models and adding the second one to the scene and then setting up the dat.gui controls:

    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);
    }

Then, the addControls function:

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

Both models are loaded but only one is added to the scene. Is it possible to add the other model when the 'Templates' control is changed? I tried to create a separate function updateboard() and call it in the render function, like this:

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

But it didn't work. I also tried to set up an if statement in the render function:

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);
        }

But it didn't work either. Any help would be greatly appreciated! Or if you can scout out an example that could help too! Thanks in advance.

Careen Careen · Accepted Answer · 2015-04-20T16:30:23

Load your objects in 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

Toggle between multiple 3d models in three.js using dat.gui

1 Answers