Lerp diffuse color

Help & Support
,
1

Hello everyone,

I would like to lerp the diffuse color from one color to another in a defined material.

However, every time I access the material.diffuse I get the error that this is not defined. With “this.material.setParameter(“diffuse”, rbg-value)” I am told that this is not a function.

I would (logically for me) do it this way - but the error is that I cannot access the diffuse:

BlendDeformation.prototype.lerpMaterialColor = function (toColor, dt) {
    if (!this.sphereMaterial) return;

    var lerpedColor = new pc.Color(0, 0, 0, 0);
    lerpedColor.lerp(this.sphereMaterial.diffuse, toColor, dt);

    this.sphereMaterial.setParameter("diffuse", lerpedColor);
    this.sphereMaterial.update();
};

Unfortunately I don’t know what to do - can anyone help me?

2

Could you show the exact error? It sounds like this.sphereMaterial is not available when you call this code. Place a breakpoint and see what is happening there.

3

Screenshot 2024-03-11 120958
Screenshot 2024-03-11 1209581096×251 10.8 KB

Hello!

I have installed a console.log before I call the .diffuse to check if sphereMaterial is really there. Whereby through the first line “if (!this.sphereMaterial) return;” this must actually be anyway and otherwise the script should not run at all.

But as soon as it gets to the line:
lerpedColor.lerp(this.sphereMaterial.diffuse, toColor, dt);
it continues to say that “this.sphereMaterial.diffuse” is not defined.

I added the material via the attribute:
"BlendDeformation.attributes.add("sphereMaterial", { type: "asset", assetType: "material", array: false, title: "Materials" });" in the editor.

Do you have any ideas?

4

If it is an attribute, then it is an asset, not a material. You access the material referenced by the asset in the attributes via:

this.myAttribute.resource

So, in your case:

this.sphereMaterial.resource.diffuse;
1 Like