How can I prevent an image from appearing greyed out when loading it onto the scene background in Three.js?

[Mugen87]

@decode

const bgTexture = textureLoader.load(stars)
scene.background = bgTexture

Try it like so:

const bgTexture = textureLoader.load(stars)
bgTexture.colorSpace = THREE.SRGBColorSpace
scene.background = bgTexture

Since the latest three.js version r152, the engine assumes a sRGB workflow by default. You can find more information about this change here:

Updates to Color Management in three.js r152

The upcoming release r152 will contain changes affecting color and lighting. These updates enable a “linear workflow” by default, for better image quality in both physically-based and non-physically-based scenes. By “linear workflow”, we mean that any sRGB input colors (as found in most textures, color pickers, CSS, and HTML) are converted from sRGB to a linear working color space for rendering, and the rendered image is converted back to sRGB for display. What does that mean for me? These ch…