Changing the color of a surface in the modelGroup?

[gessha]

Hi, I've been working on extending the functionality of this library and I've been designing a modern minimalist UI for it and what I'm working right now is adding the functionality of changing the color of an existing surface in the model group. I tried doing this:

GLmol.prototype.changePdbColor = function(id, color){

  var currentPDB = _.where(this.modelGroup.children, {name: id})[0];
  var newColor;

  if ( color.search('#') >= 0 ) {
      color = color.substring(1); // remove the pound # sign
      color = parseInt(color, 16);
      newColor = new THREE.Color(color);
    }
  else if ( color.search('rgb') >= 0 ) {
    var colorValues =color.substring(color.lastIndexOf("(")+1,color.lastIndexOf(")")).split(",");
    var r = parseInt(colorValues[0]) / 255;
    var g = parseInt(colorValues[1]) / 255;
    var b = parseInt(colorValues[2]) / 255;
    newColor = new THREE.Color(r,g,b);
  }
  else if ( color.search('hsl') >= 0 ) {
    // TODO: finish this
    var colorValues = color.substring(color.lastIndexOf("(")+1,color.lastIndexOf(")")).split(",");
  }

  currentPDB.children.forEach(function(child){
    child.material.color = newColor;
  });
  this.show();
}

But all this does is just mess up the color and it doesn't really change it. How are you supposed to change the color?

[biochem-fan]

Colors in GLmol are assigned to each vertex (in THREE.Geometry object), not THREE.Material. This is why

child.material.color = newColor;

does not work.

[gessha]

So, do you have to do anything other than this?

GLmol.prototype.changePdbColor = function(id, color){
  console.log("[GLmol][changePdbColor]  beginning of function");

  var currentPDB = _.where(this.modelGroup.children, {name: id})[0];
  var colorNew = new TCo(0x00FF00); // constant color for debugging purposes

  currentPDB.children.forEach(function(child){
    child.children.forEach(function(inner_child){
        inner_child.geometry.colorAll(newColor);
    });
  });
  this.show();
}