getParameter - setParameter --- How in chrome console to change color/material

How do you modify and update colors or swop materials or do other interesting things with get and setParameter?
Example scene - https://launch.playcanvas.com/545561?debug=true

// Get the first apple
var apple = pc.app.root.findByName(“apple1”);

These are the model names :

—Models—
apple1
apple2
apple3
apple4

–Material–
red-apple
green-apple

I would like to:

  1. Change the tint color on the material
  2. Swop the materials (red-apple) with (green-apple)

The example tutorial is no good to me as I need to be able to do this from an external GUI or in other words Chrome console - https://developer.playcanvas.com/en/tutorials/switching-materials-at-runtime/

ANY other interesting tips or code examples would be interesting.

Hi.

Your link is broken.

After modifying material update it:

material.diffuseMap = texture;
material.update();

But remember, that only pc.StandardMaterial has this method.

Change material:

var material = context.assets.getAssetByName('Red');
this.entity.model.materialAsset = material;

Sorry i had the project set to private, it’s public now. Not sure what you mean by “material.diffuseMap = texture;” ? If you could explain that would be great.

But your other hint helped and I managed to swop the materials in chrome console like this:

var firstobject = pc.app.root.findByName(“Box1”);
var secondobject = pc.app.root.findByName(“Box2”);

var material = pc.app.assets.get(8887337);

firstobject.model.materialAsset= material;

Thanks for your help !

Okay, about material.diffuseMap = texture;

Your material has some attributes, diffuseMap is one of them. When you change it or any other, tintColor in your case, you have to update material, to accept your changes.

In a nutshell, you need to find the material via the asset registry, find all the apple entities by tag (assuming that the apple entities are tagged (which they are not in your project)) and finally change the materials as shown in the tutorial linked above in your post.

https://playcanvas.com/editor/code/500456?tabs=8895133 <- Quick and dirty example which doesn’t find the apples by tag but you should be able to fill in the blank.

1 Like

Sorry I still do not understand … if you had an example it would help. Its the texture part that I don’t understand. There is no context to help me understand what “texture” is supposed to represent. Is it a variable? Is it a literal constant ? Can “texture” be redefined as “/serverlocation/mytexture.png” … why am i putting “texture” to the right of the equal symbol? Where is this texture defined? Can texture be replaced with some other paramater? Like “opacity” or “transucence” .

@yauster thanks … that was exactly what i needed the tag thing is very useful !

I’m having a similar problem with an asset material on an asset model. I’ve worked my way through a lot of it but one problem remains - replacing the material on the asset with a new one. This seems different than adding a new material to a model component.

Specifically:
top_node is a model asset and has a material already assigned. It appears in the scene with the material unchanged. I’m trying to override its material with a new one with an overidden diffuse color.

var top_node = new pc.Entity();
var modelPlinth = this.app.assets.find(“Plinth.json”, “model”);
top_node.addComponent(“model”, { type: “asset”, asset: modelPlinth });
var Plinth_material = this.app.assets.find(“Plinth_Physics”, “material”).resource;
// this works - I can see the material in chrome debugger
Plinth_material.diffuse.set(1,0,0); // this works - can see the 1,0,0 inside the diffuse iv of the material
Plinth_material.update(); // cos it says we should
var foo = Plinth_material.diffuse; // check var so I can easily see (Chrome) if it has changed. It has.
top_node.model.material = Plinth_material;
// this last statement does not seem to change the material on the asset
// adding an update to this shows no update in the scene either
top_node.model.material.update();

I think I am missing something about how to replace a material on an asset that has one when loaded. The simple assignment does not seem to work.

{edit] actually just tried with asset with no material on it to start with same problem - Not overriding the default material. so I’m just missing something simple I’m sure :frowning:

[edit] extra info. I’m calling this routine many times making a new object each time and adding to the scene under a top level entity.

I can’t find a materialAsset method or iv for model :frowning:

I feel really stupid I can’t work this out.
I’ve also seen references to model.resource(); but resource is an iv not a method. So confusing.

OK. I’ve worked it out - thank goodness for the forum.
You need to get hold of all the mesh instances and for each one - set the material
just setting the model.material will simply not work.
So:

// Create the entity to eventaully add to the scene.
var top_node = new pc.Entity();
// Find the model asset to attach to the entity.
var modelPlinth = this.app.assets.find("Plinth.json", "model");
// Add the model as a component to the entity.
top_node.addComponent("model", { type: "asset", asset: modelPlinth });
// Find the material asset you wish to apply to the model.
var Plinth_material = this.app.assets.find("Plinth_"+faculty, "material").resource;
// If you want to change any aspects of the material do it like this:
//Plinth_material.diffuse.set(1,0,0);
//Plinth_material.update(); // must update to see changes.
// This next line is here simply so we can more easily see the values in(say) the Chrome browser source tab(F12)
var foo = Plinth_material.diffuse;
// Received wisdom says this will change the models material to our new one but this does not work.
//top_node.model.material = Plinth_material;
// Instead you need to loop over all the mesh instances and set the material to each one.
var meshInstances = top_node.model.meshInstances;
for (var i = 0; i < meshInstances.length; i++) {
    meshInstances[i].material = Plinth_material;
}

my ref issue in the forum for this solution was:

1 Like