title: Adding geometry to THREE.Object3D
body: <p>I've edited this post to make it more clear.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/iFsWz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iFsWz.png" alt="The initial state of the tile"></a></p>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/eFM4I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eFM4I.png" alt="Update state of the tile"></a></p>
  
  <p>This is the code to create a tile:</p>
  
  <pre><code>var tile=[];
  var n=0;
  for(var i=0; i&lt;4; i++){
      for(var j=0; j&lt;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);
       }
  }
  </code></pre>
  
  <p>To update the state of a triangle of the Tile I'm using this code:                          </p>
  
  <pre><code>for(var j=0;j&lt;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&lt;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";
          }
      }
  }
  </code></pre>
  
  <p>Is this the correct way to change to modifie a material?</p>
  
  <p>I simplifyed a little bit the code to show better my issue. However, the real code is in this repository <a href="https://github.com/tul1/Tile.git" rel="noreferrer">https://github.com/tul1/Tile.git</a> . If you want to take a look at it working I deployed it in <a href="http://tul1.github.io/examples/dale.html" rel="noreferrer">http://tul1.github.io/examples/dale.html</a> .</p>