How can I modify parameters of Objects in my scene loaded with OBJMTLLoader?

Question

I have an scene with 3 cubes and a DAT.GUI menu, I just want to set any cube to wireframe when it is checked on the menu (separatedly).

What I did works for 2 of my 3 cubes, but I don't know why, the first cube is not modified, you can se the example here:

Link to Example

And here is the main code:

var loader = new THREE.OBJMTLLoader( manager );

    loader.load( '/pruebas/models/cubosMateriales.obj', "/pruebas/models/textures/cubosMateriales.mtl", function(object){

        contenido = object;
        contenido.position.set(0,0,0);
        contenido.position.y = -80;
        contenido.name = "cubes";

        scene.add(contenido);
        console.log(contenido);

        return contenido;
    })

    renderer.setSize( window.innerWidth, window.innerHeight );
    canvas.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}

function animate()
{

    requestAnimationFrame( animate );
    controls.update();

    if(contenido != undefined){             
        contenido.traverse( function( object ) {            
                    if( object.material ) {
                        object.material.opacity = opciones.Opacidad;
                        object.material.transparent = true;

                        contenido.getObjectByName("Box001").material.wireframe=opciones.cube_1;
                        contenido.getObjectByName("Box002").material.wireframe=opciones.cube_2;
                        contenido.getObjectByName("Box003").material.wireframe=opciones.cube_3;     
                   }
        })
    }
    render();
}

And if you have a look at the DOM Tree, this is the structure created for 3 cubes.

tree

Where the cubes are on the positions 1, 3 and 5. The rest of the positions contains some unidentified mess (haha, get it? Mesh.... ok... Forget it).

Can someone help me to identify the problem? Why I can't access the first cube, and what are all that meshes created with no name?

score 2 · Accepted Answer · answered Mar 10 '16 at 23:56

Although OBJMTLLoader is now deprecated, the result is the same if using OBJLoader + MTLLoader. The problem here is that objects who share the same material in the OBJ (objects with the same material assigned in 3DS Max) inherit that property in Three.js, no matter what the DOM Tree says, each material is assigned to his geometry, and when you try to change only one by modifying a concrete child, all children with that material are modified.

The solution is to assign a different material to every object in 3DS Max and then export it to OBJ + MTL

How can I modify parameters of Objects in my scene loaded with OBJMTLLoader?

1 Answers1