Background image texture is not working

I have this page with a background image and it works perfect! (working page ) ( full code )

I want to do the same thing in this new page:
I copy the code, I believe is the same, but something must be wrong because is not working
I don’t want to bother anyone marquizzo, and I did took the course for javascript!
but I don’t see the answer here:
I get this in the console: THREE.WebGLState: DOMException: “The operation is insecure.” ( Not working page ) ( full code not working )

It seems you are using an outdated approach for making backgrounds. If you just want to apply a texture to the scene’s background, do this:

const loader = new THREE.TextureLoader();
scene.background = loader.load( '' );

1 Like

It must be witchcraft !!!

I add your code: it works perfect!
I add my image : it doesn’t work … bad ( you can see the full code in the .txt file above )

line 141: my image …

  scene.background = loader.load( '' );

line 143: your image …

scene.background = loader.load( '' );

You can see the working page here:
with your image…

and YES! my image is in the right directory, and is in the web:
you can see it here:

one single line of code, the image is there, one works, one doesn’t …
what am I doing wrong…

I tried the https, and http and is not working, look at my image, is in both places


When you website is hosted via HTTPS, that it’s required to serve the background image via HTTPS, too.

I get this in the console:

   Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

 Blocked loading mixed active content “”

Any suggestions: That is the problem… what is the solution? or how can I fix this, so I can see my image in the background…

It seems you loading three.js via HTTP. Can you it with HTTPS instead?

Hi, I’m using this method you posted. Working great.
Except: any image displayed is somehow coming in at a much higher gamma? level. Any way to avoid this or attenuate it after implementing?


EDIT: got the answer from Dawg in the discord. THANKS!

scene.background.encoding = THREE.sRGBEncoding;

fixed it.