Background image texture is not working

Questions
1

Hello:
I have this page with a background image and it works perfect!
http://songnes.com/g/g76.html (working page )
http://songnes.com/g/g76.txt ( 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.”

http://www.songnes.com/gift/page18.html ( Not working page )
http://www.songnes.com/gift/page18.txt ( full code not working )

2

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( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );

https://jsfiddle.net/jp69gv4n/1/

1 Like
3

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( 'http://songnes.com/gift/images/andro.jpg' );

line 143: your image …

scene.background = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );

You can see the working page here: https://www.songnes.com/gift/page18.html …
with your image…

and YES! my image is in the right directory, and is in the web:
you can see it here: http://songnes.com/gift/images/andro.jpg

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

???

4

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

5

I get this in the console:

   Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://songnes.com/gift/andro.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). 

 Blocked loading mixed active content “http://songnes.com/js/threeJS/three.min.106.js”

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…

6

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

7

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?

Thanks!

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

scene.background.encoding = THREE.sRGBEncoding;

fixed it.