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.

score 0 · Answer 1 · answered Apr 20 '15 at 16:30

0

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

answered Apr 20 '15 at 16:30

Careen

567
1
6
26

'scene.add(my_models[0])' is only working if it is used in the loader function. when it is moved outside, like you have it, nothing is added to the scene... any idea why? @Careen – Mike L. Jul 08 '15 at 23:48
looks like you can only add one obj to the scene within the loader.load function. sort of mentioned in comments [here](http://stackoverflow.com/questions/10888479/render-obj-file-using-three-objloader) – Mike L. Jul 09 '15 at 00:02
Is there another loader for three.js that allows you to add multiple .obj's (or any other 3d files) to the scene and toggle them on or off? @mrdoob – Mike L. Jul 09 '15 at 00:21

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

1 Answers1