Has something changed in code for the "background" property of Scene?

Questions
,
1

I have the following lines of code in my application:

// background color

	grandScene.background = new THREE.Color( 'rgb(200,200,200)');
	
	console.log(grandScene.background);

When I run this using an earlier version of THREE, the console shows:

Object { isColor: true, r: 0.7843137254901961, g: 0.7843137254901961, b: 0.7843137254901961 }

When I run this using a more recent version of THREE, the console shows:

Object { isColor: true, r: 0.5775804404214573, g: 0.5775804404214573, b: 0.5775804404214573 }

I don’t know how to find out which THREE version numbers these are.

Thanks much

OLDMAN

2

This is likely a color management related issue. Read the following guide for more details:

1 Like
3

Exactly as @Mugen87 says! The more recent version interprets the color as sRGB, as CSS engines would. Assuming the rest of your scene and renderer are set up correctly the output should match HTML/CSS. (Tone mapping would change that result a bit though).

If you did need to revert to the previous behavior, this should do it:

grandScene.background = new THREE.Color().setStyle(
  'rgb(200,200,200)',
  THREE.LinearSRGBColorSpace
);
2 Likes
4

After going through the color management changes notes for the recent version of THREE, I made the following changes to my application:

	THREE.ColorManagement.enabled = false;
	renderer01.outputColorSpace = THREE.LinearSRGBColorSpace;

This fixed the earlier problem with the background color.

That is to say, when now I do

grandScene.background = new THREE.Color( 'rgb(200,200,200)');

I now get:

Object { isColor: true, r: 0.7843137254901961, g: 0.7843137254901961, b: 0.7843137254901961 }

which agrees with 200/255.

However, there is still a difference in the visual quality of the rendering.

The first image represents a rendering using the earlier version of THREE

old

The second image represents a rendering using the recent version of THREE (even after applying the two lines mentioned above)

new

I would like to get the earlier look back (first image).

Is there something more I need to do in my code?

All the color assignments in my code are done through RGB assignments between 0 and 255.

Do I need to be doing something like the following for each color assignment in my code?

grandScene.background = new THREE.Color().setStyle('rgb(200,200,200)',THREE.LinearSRGBColorSpace);

Thanks much

OLDMAN

5

for this you need to consult Updates to lighting in three.js r155

6

worked!!

thank you V M

OLDMAN