Do material base color and emissive color work the same way(saving / loading background)?

Questions
,
1

I stumbled across an issue related to loading/saving colors.
Especially the emissive color seems to work kinda different when trying to load/save any value.

Could it be that the emissive color does work with 0x112233 color-codes and the base color with #112233?
I realize that lil-gui does work with #112233; that is not what I’m after.
The problem happens only on load and on save; no matter what I try.

Even duplicating the “working” code from “color” to “emissive” won’t work. That’s why I am asking if there is something different in the background I’m not aware of… either that or I’ve screwed myself :slight_smile:

Thanks for any thoughts on this.
Doing all this in r143.

This issue is only related to saving/loading RGB values. As soon I set the emissive color manually (via lil-gui) everything does work. It just won’t load/save as #112233 ; instead it saves as 0x112233

I do suspect some other 3rd party modules; but wanted to check first on three.js if there is something I’m not aware of.
Thanks.

2

They work exactly the same, and in fact neither of them allows 0xRRGGBB or #RRGGBB. It’s just a peculiarity of Material constructors, that if you do:

new MeshStandardMaterial({ color: 0xffffff });

It’ll not throw and just pass that input to Color constructor, making it equivalent to:

new MeshStandardMaterial({ color: new THREE.Color(0xffffff) });

But if at any point you’d do any of this:

material.color = 0xFFFFFF;
material.color = "#FFFFFF";
material.emissive = 0xFFFFFF;
material.emissive = "#FFFFFF";

It’ll no longer do that little substitution for you and just throw an error.

The simplest and safest way to set it would be just to always initialise the color yourself:

material.color = new THREE.Color("#FFFFFF");
material.emissive = new THREE.Color(0xFFFFFF);

If you’re 101% sure the color has been initialised and you just want to change it, you can also do:

material.color.set(0xFFFFFF);
material.emissive.set("0xFFFFFF");

But this will throw if the value of color / emissive is not THREE.Color.

(Same applies to Scene.background.)

1 Like
3

thanks for pointing this out - surely I’ve messed around with it just like you’ve described it and it threw me off big-time :slight_smile:
solved