I am working on a scene that includes 3 cubes and a DAT.GUI menu. My goal is to switch any cube to wireframe mode when it is selected in the menu individually.
Although my code is successful for 2 out of the 3 cubes, I am facing an issue where the first cube remains unmodified. You can view the example here.
Here is the main part of the 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();
}
Examining the DOM Tree reveals the structure created for the three cubes.
In positions 1, 3, and 5 are the cubes while the remaining positions seem to have unidentified meshes (pun intended).
I need assistance identifying why I cannot modify the first cube and what these unnamed meshes represent.