[SOLVED] Converting the 'Diffuse box' at editor heirarchy into 1-to-1 code

Help & Support
1

I thought I had it in relation to loading textures - but apparently not. While debugging in relation to loading externally, I find myself in a situation where I struggle to read the mechanisms behind the ‘Tint’-method.
Take this difference within tinting a loaded texture:

  1. Without any load methods it is possible to ‘do both’, within the editor when it comes to A: setting a texture B: tinting it afterwards
    image

  2. When I try to do this by code the approach fails >> first by the following code:

var meshes = self.getFoxy.model.meshInstances; console.log("MIL: "+meshes.length);
         var colorR = 58/255; var colorG = 50/255;var colorB= 47/255;  
         colorG, colorB);       
            for(var i=0; i<meshes.length; i++){   
                if(i ===1 || i ===2 || i ===3 || i ===4){
                meshes[i].material.diffuseMapTint.enabled = true;  meshes[i].material.diffuse.set(colorR, 
                colorG, colorB);                }
                meshes[i].material.update();                
            }
  • the model turns to the color only.
  1. If changing the order, by setting the texture prior to the colorsetting like this:
var meshes = self.getFoxy.model.meshInstances; console.log("MIL: "+meshes.length);
         var colorR = 58/255; var colorG = 50/255;var colorB= 47/255;  
         colorG, colorB);      
            for(var i=0; i<meshes.length; i++){   
               meshes[i].material.diffuseMap = self.app.assets.get(31278812).resource;
                if(i ===1 || i ===2 || i ===3 || i ===4){
                meshes[i].material.diffuseMapTint.enabled = true;  meshes[i].material.diffuse.set(colorR, 
                colorG, colorB);                }
                meshes[i].material.update();                
            }
  • the model (and its instances) will change to the texture, but it will not be subject to the colorsetting at ‘.diffuse.set’ afterwards >> the same effect as posted in 1).
2

PS: Have already tried switching:


   var meshes = self.getFoxy.model.meshInstances; console.log("MIL: "+meshes.length);
         var colorR = 58/255; var colorG = 50/255;var colorB= 47/255;  
                          for(var i=0; i<meshes.length; i++){   

                if(i ===1 || i ===2 || i ===3 || i ===4){
                meshes[i].material.diffuseMapTint.enabled = true;  meshes[i].material.diffuse.set(colorR, colorG, colorB);                }
                 meshes[i].material.diffuseMap = self.app.assets.get(31278812).resource;
                meshes[i].material.update();                
            }
  • with no luck
3

Hi @Thomas_Due_Nielsen,

Not sure what’s wrong with your code, but I’ve tried setting a small example of my own and it seems to be working fine:

SwitchingMaterials.prototype.updateMaterial = function(dt) {

   var material = this.material.resource;

   // Assign the material to all the mesh instances in the model
   var meshInstances = this.entity.model.meshInstances;
   for (var i = 0; i < meshInstances.length; ++i) { 
       var mesh = meshInstances[i];
       mesh.material = material;
       
       material.diffuseMap = this.texture.resource;
       material.diffuse = new pc.Color(1.0, 0.5, 0.0);
       material.diffuseMapTint = true;
       material.update();
   }
};

https://playcanvas.com/editor/scene/931645

4

Ok thanks, worked by:

       var meshes = self.getFoxy.model.meshInstances; console.log("MIL: "+meshes.length);
        
            var colorR = 58/255; var colorG = 50/255;var colorB= 47/255;  
                          for(var i=0; i<meshes.length; i++){ 
                             var mesh = meshes[i];
                              mesh.material.diffuseMap = self.app.assets.get(31278812).resource;                              
                              
               if(i ===1 || i ===2 || i ===3 || i ===7){
                  mesh.material.diffuse.set(colorR, colorG, colorB);        }
                              else{ mesh.material.diffuse.set(1, 1, 1);}
                          
                              mesh.material.diffuseMapTint = true;
                mesh.material.update();                
            }

I had (furthermore) forgot to assign specific ‘slots of material’ upon the model (which otherwise made the instances change regardless of the i-iterator above):

image

1 Like