(SOLVED) Texture not loading

Questions
1

I’m trying to get the cube background to work but I can’t, is there anything I could of missed?
K so the problem was that textures can’t be loaded locally, this can be solved here: https://threejs.org/docs/#manual/introduction/How-to-run-things-locally

works, red background
scene.background = new THREE.Color( 0xff0000 );

doesn’t work, black background
scene.background = new THREE.CubeTextureLoader().load( [
‘…/images/skybox/front.png’,
‘…/images/skybox/right.png’,
‘…/images/skybox/back.png’,
‘…/images/skybox/left.png’,
‘…/images/skybox/up.png’,
‘…/images/skybox/down.png’
] );

also does file navigation start at the the html that is running the js or the js location?

2

Any warnings or error messages in the browser console?

1 Like
4

HTML. You should first ensure, that your textures are actually loaded. Use the Network Tab of your Browsers Dev tools. Manual for Chrome:

1 Like
5

No, noting but the default log

6

K so the problem was that textures can’t be loaded locally, this can be solved here: https://threejs.org/docs/#manual/introduction/How-to-run-things-locally

7

I encountered the same problem, the image file is loaded locally
as you can see here :

image
image802×502 102 KB 

 `scene.background = new THREE.CubeTextureLoader().load([
  stars,
  stars,
  stars,
  stars,
  stars,
  stars,
]);`

but still showing no background.

8

I faced the same problem when when I worked on it and I found the solution. basically, Texture Loader works on-screen width height behalf, if you are working on 1920x1080 so, try it

import sun from ’ ‘https://cdn.spacetelescope.org/archives/images/screen/heic1310a.jpg’';
const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load([
sun,
sun,
sun,
sun,
sun,
sun,
]);
or any image whose width is 1280px and height is also 1280px. This will be working.

9

I was also getting the same issue, I was using image locally.
import nebula from “…/src/nebula.jpg”;

but the issue is with the image file. The image height and width should be in 1:1 ratio perfectly.
My image was 1003x1000, even at that point it was causing issues, then I used an image cropper, made it purely to 1000x1000, and then it was working perfectly fine.
See the results here,

image
image1913×940 118 KB

by the way I used that code,

const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load([
  nebula,
  nebula,
  nebula,
  nebula,
  nebula,
  nebula,
])
2 Likes