Adding geometry to THREE.Object3D

Question

I've edited this post to make it more clear.

Well, What I am trying to do here is to represent a tile composed by 8 different triangles. Each triangle should be able to change it color independently.

So, the problem I'm having is that when I change the color of a single triangle it changes the color of the lines in betwen, as you can see in the second image.

This is the code to create a tile:

var tile=[];
var n=0;
for(var i=0; i<4; i++){
    for(var j=0; j<2; j++){
        var triangle = new THREE.Object3D();
        var lineMaterial = new THREE.LineBasicMaterial({color:0xffffff, transparent:true, opacity:0.5});
        var triangleMaterial = new THREE.MeshPhongMaterial({color:COLOR_OFF ,emissive:EMISSIVE_OFF ,side:THREE.DoubleSide, shading:THREE.FlatShading});

        var geometry = new THREE.Geometry();
        geometry.vertices.push( triangleVectors[j][0], triangleVectors[j][1], triangleVectors[j][2] );
        var face = new THREE.Face3(0, 1, 2);
        geometry.faces.push(face);

        triangle.add(new THREE.LineSegments(new THREE.Geometry(), lineMaterial));
        triangle.add( new THREE.Mesh( new THREE.Geometry(), triangleMaterial));

        triangle.children[ 0 ].geometry = new THREE.WireframeGeometry(geometry);
        triangle.children[ 1 ].geometry = geometry;

        triangle.rotation.z = Math.PI*i/2;
        triangle.position.x = TILE_LENGTH*x;
        triangle.position.y = TILE_LENGTH*y;

        n++;                        
        tile.push({'triangle':triangle,'number':n,'state':"OFF"});                      
        scene.add(triangle);
     }
}

To update the state of a triangle of the Tile I'm using this code:

for(var j=0;j<tile.length; j++){

    tile[j].triangle.children[0].material.color.set(COLOR_OFF);
    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           tile[j].triangle.children[0].material.color.set(COLOR_ON);               
           tile[j].triangle.children[1].material.color.set(COLOR_ON);
           floor[i].tile[j].state="ON";
        }
    }
}

Is this the correct way to change to modifie a material?

I simplifyed a little bit the code to show better my issue. However, the real code is in this repository https://github.com/tul1/Tile.git . If you want to take a look at it working I deployed it in http://tul1.github.io/examples/dale.html .

Answer 1

So, the problem I'm having is that when I change the color of a single triangle it changes the color of the lines in between, as you can see in the second image.

I looked at your source code, and if all you want to do is not affect the color of the lines in between so that they remain white, simply remove the line that changes the color of lineMaterial:

for(var j=0;j<tile.length; j++){
    // The line below changes all line colors to 0x156289:
    // tile[j].triangle.children[0].material.color.set(COLOR_OFF);

    tile[j].triangle.children[1].material.color.set(COLOR_OFF);
    tile[j].state="OFF";

    for(var k=0; k<pathUpdates[step].length; k++){
        if(pathUpdates[step][k].number == tile[j].number){
           // The line below changes the active line color to 0x891528
           // tile[j].triangle.children[0].material.color.set(COLOR_ON); 

           tile[j].triangle.children[1].material.color.set(COLOR_ON);
           floor[i].tile[j].state="ON";
        }
    }
}

Result

If you don't touch the color on the lines, they'll remain white as when you first created them:

Grouping

If you want to group all tiles into one object, you should declare a THREE.Group object in your global scope (outside all the for() loops). Then you can add each triangle individually in each iteration of the for() loop. Here's some pseudocode on how to achieve this:

// Create tileGroup outside the loop
var tileGroup = new THREE.Group();

for(var x=0; x<nX; x++){
    for(var y=0; y<nY; y++){
        var tile=[];
        var n=0;
        for(var i=0; i<4; i++){
            for(var j=0; j<2; j++){
                // All your existing triangle-creation code goes in here

                // ...

                // After triangle has been created, we add triangle
                // to group, instead of adding it to scene
                tileGroup.add(triangle);
            }
        }
    }
}

// Finally, we add tileGroup to scene
scene.add(tileGroup);

// Now we can manipulate all tiles at once within the group
tileGroup.position.set(0, 15, 0);