Materials override

Help & Support
1

I have weird behaviour, when I pick the body ok I can change the color when next I pick the wheel, the body and wheels get new color why?
But when I first (after load of app) pick wheel the wheels get color changed so ok

...
const nodeName = selectedItem.node.name;

const bodyPaint = 'Cube_2_3';

const wheel = 'wheel';
            
const isWheel = nodeName.includes(wheel);
const mat = selectedItem.material;
            
 this.container.style.display = 'inline';

 if(nodeName === bodyPaint){

                this.changeColor(mat);

                this.flyTo(this.bodySpot.getPosition());
                

 }
 else if(isWheel){
                this.changeColor(mat);
                
                this.flyTo(this.wheelsSpot.getPosition());

 }
 }
 }
 changeColor(mat){
        this.container.addEventListener('change', () => {
            mat.diffuse = new pc.Color().fromString(this.container.value);
            mat.update();

        });
 }

in short the wheels and body get simultanously updated after above actions
I want to change color of body or wheels not both

2

Hi @grzesiekmq,

If both the body and the wheels use the same material, then it’s expected to get the same color when you update that said material.

If you would like to change the color only on a specific mesh instance / instances, then you have to either clone the material (use unique materials per model) or use setParameter instead of updating the material.

Check the following thread on how to do that:

2 Likes
3

but the wheels (each wheel uses Mat.1) and body paint so ‘Cube_2_3’ uses Mat.009
image

4

Try printing the names of the materials you run .update() on, in the console, to see which materials finally change.

2 Likes
5

image
image917×64 4.02 KB

both are get updated, but not when I pick body(when I pick at first body I get name:“Mat.009”),
but pick body then try pick wheel then both are get updated

In other words: after load I pick the wheels and change color: only wheels are updated
image
next I refresh the page and I pick the body and change color so the body is updated
image

but when I try to pick body then wheels so change color of wheels ( then it works like selecting sth with ctrl)
image
in this case not only the wheels are updated

the third case is weird it should not acts like this
vice versa works similar ( I mean when pick the wheels then body the both are updated)
so conclusion is
body -> wheels (both updated)
wheels -> body (both updated)
it works like it remembers the previous state why?
what I want?
when pick in this order:
body -> wheels (change wheels color, wheels updated)
wheels -> body (change body color. body updated)

by picking I mean only click on part not change color

6

If they are both getting updated it’s normal to have their color change. Try adding a debugger; statement in top of your code.

That will automatically open up the debugger and you can step in through each line as it gets executed. That will shed some light on what’s happening in there.

1 Like
7

I get

Forgotten ‘debugger’ statement?

/*jshint esversion: 6 */
debugger;
8

That’s just a warning, an important one, don’t forget that statement on your production builds.

But you can still use it to debug temporary.

1 Like
9

ok I see I must go to google chrome console not pc code editor

but it steps into pc engine not only in my PickerFramebuffer.js

1 Like
10

Hmm, the problem could be related to the way you are attaching and firing an event from the HTML element. You can remove the material update from there and just add some debug console.log. Check that the log appears only once in the console when you pick different objects.

As a side note, it is very hard to read your code. Please, follow some common coding style. Here is a good guideline, for example:

1 Like