I've been experimenting with loading images onto the scene background using the TextureLoader() class to prevent them from appearing greyed out.
Following a tutorial on three.js https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho, I noticed that when I tried to load the same image, it appeared greyed out. I even cloned the tutorial repository, but the issue persisted, leaving me unsure if the method used is outdated or if there are other influencing factors such as browsers or the image itself.
Here's the image appearing greyed out: greyed out background
And here's how it should look, as shown in the tutorial: normal background
You can find the complete code or check it in the repository link provided (https://github.com/WaelYasmina/threetutorial)
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import nebula from '../img/nebula.jpg'
import stars from '../img/stars.jpg'
// Remaining code remains the same as the original text...
Despite checking the TextureLoader() documentation , I couldn't find a solution that worked.
I attempted setting the alpha to true but it didn't resolve the issue: const renderer = new THREE.WebGLRenderer( { alpha: true } );