When using the callback function for the MTLLoader.load method, you will receive a MTLLoader.MaterialCreator object, although it is not officially documented. This object is referenced as the material parameter in your code snippet:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( mtlURL, function( material ){ // <-- the MaterialCreator
// ...
});
Once you have called the preload method, the materials property within the material object will be populated with the material names defined in the MTL file. Upon debugging, you will observe two instances of MeshPhongMaterial named blinn5SG and blinn8SG.
Adjusting color during loading
Prior to loading your object, you have the opportunity to manipulate the colors.
material.materials.blinn5SG.color.setHex( bottleColorHex );
material.materials.blinn8SG.color.setHex( capColorHex );
Modifying color during runtime
To access the materials for color changes later on, you can store them in globally-accessible variables:
var mtlLoader = new THREE.MTLLoader();
var bottleMaterial = null;
var capMaterial = null;
mtlLoader.load( mtlURL, function( material ){ // <-- the MaterialCreator
material.preload();
bottleMaterial = material.materials.blinn5SG;
capMaterial = material.materials.blinn8SG;
//...
});
// later...
function changeColor( material, newHexColor ){
material.color.setHex( newHexColor );
material.needsUpdate = true;
}
// examples:
changeColor( bottleMaterial, newBottleHexColor );
changeColor( capMaterial, newCapHexColor );
During runtime, ensure to set material.needsUpdate to true, indicating to the renderer that the material has been altered.