25 days ago

What steps can I take to avoid an image displaying in a faded state when uploaded to the scene background using Three.js?

I need some assistance in loading an image onto the scene background using the TextureLoader() class in three.js. I encountered an issue where the loaded image appears greyed out, similar to the example shown in this image: greyed out background. However, the expected result should be a normal background, like the example shown in this image: normal background. I am following the code from a three.js tutorial at but this code also produces the same result for me. I have researched the issue thoroughly but haven't found anything helpful. Here's the code I'm using:
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'

const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true
renderer.setSize(window.innerWidth, window.innerHeight)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
    window.innerWidth / window.innerHeight,

const orbit = new OrbitControls(camera, renderer.domElement)
const axesHelper = new THREE.AxesHelper(3)


const boxGeometry = new THREE.BoxGeometry()
const boxMaterial = new THREE.MeshBasicMaterial({color:0x00FF00})
const box = new THREE.Mesh(boxGeometry,boxMaterial)

const planeGeometry = new THREE.PlaneGeometry(30,30)
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xFFFFFF,
    side: THREE.DoubleSide
const plane = new THREE.Mesh(planeGeometry,planeMaterial)
plane.rotation.x = Math.PI * -0.5
plane.receiveShadow = true

//Grid Helper
const gridHelper = new THREE.GridHelper(30)

const sphereGeometry = new THREE.SphereGeometry(4,50,50)
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0x0000FF,
    wireframe: false
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.castShadow = true

//Ambient Light
const ambientLight = new THREE.AmbientLight(0x333333)

//Directional Light
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8)
// scene.add(directionalLight)
// directionalLight.position.set(-30,50,0)
// directionalLight.castShadow = true
// = -12

// const dLightHelper = new THREE.DirectionalLightHelper(directionalLight,5)
// scene.add(dLightHelper)

// const dLightShadowHelper = new THREE.CameraHelper(
// scene.add(dLightShadowHelper)

const spotLight = new THREE.SpotLight(0xFFFFFF)
spotLight.castShadow = true
spotLight.angle = 0.2

const sLightHelper = new THREE.SpotLightHelper(spotLight)

//scene.fog = new THREE.Fog(0xFFFFFF, 0, 200)

// scene.fog = new THREE.FogExp2(0xFFFFFF, 0.01)
// renderer.setClearColor(0xFFEA00)

const textureLoader = new THREE.TextureLoader()
scene.background = textureLoader.load(stars)

const gui = new dat.GUI()
const options = {
    sphereColor : '#ffea00',
    wireframe: false,
    speed: 0.01,
    angle: 0.2,
    penumbra: 0,
    intensity: 1

// color gui
gui.addColor(options, 'sphereColor').onChange(function(e){

// wireframe gui
gui.add(options, 'wireframe').onChange(function(e){
    sphere.material.wireframe = e

// speed gui
gui.add(options, 'speed', 0, 0.1)

gui.add(options, 'angle', 0, 0.1)
gui.add(options, 'penumbra', 0, 0.1)
gui.add(options, 'intensity', 0, 1)

let step = 0
function animate(time) {
    box.rotation.x = time/1000
    box.rotation.y = time/1000

    step += options.speed 
    sphere.position.y = 10* Math.abs(Math.sin(step))
    spotLight.angle = options.angle
    spotLight.penumbra = options.penumbra
    spotLight.intensity = options.intensity
    renderer.render(scene, camera)

I have also checked the documentation for TextureLoader() at but haven't found anything that solves the issue. Any help would be greatly appreciated.
25 days ago
Verified Answer
I see. It seems that you are trying to load an image onto the scene background using the TextureLoader() class in three.js but the loaded image appears greyed out. I understand that you have followed the code from a three.js tutorial at but this code also produces the same result for you. The issue could be due to the fact that the image is not fully loaded before it is applied to the scene background. You can try adding an event listener to the texture object to check when it's fully loaded before applying it to the scene background. Here's an example:
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(nebula, () => {
    // This function will be called when the texture is fully loaded
    scene.background = texture;
You can replace nebula with your image file path. I hope this helps! Let me know if you have any other questions.
25 days ago
To load an image onto the scene background without it appearing greyed out using the TextureLoader() class, you need to make sure to set the background property of the scene object equal to the texture loaded by the TextureLoader() function. In the code provided, the stars variable is passed to the load() method of the TextureLoader() function, which returns the loaded texture. However, this texture is never assigned to the background property of the scene object. To fix this, simply add the following line of code after loading the texture:
scene.background = textureLoader.load(stars)
This will set the loaded texture as the background of the scene. Additionally, make sure that the image file path is correct and that the image exists in the specified location.