Texture loading not working on server

Im just trying to put online a simple example that I made.

Im trying to put the floor a texture. It works when i do it on the local host but it does not work when I uploaded into my server.

Im having two problems.

1 Skybox is not been seeng properly, it loads the textures, but they seem to be broken.

2.The textures in the floor are not working.

This is the part where it loads the maps of the floor :

var TL = new THREE.TextureLoader();		
		//http:biometriatb.com/proyectosingapur2/texturas/Dto_Monoambiente_Piso/pamesa/normal.jpg
		var dir = "texturas/piso/";
		   
		var normalpiso =TL.load(dir+"/normal.jpg");
		var metalpiso = TL.load(dir+"/metal.jpg");
		var roughnesspiso = TL.load(dir+"/roughness.jpg");
		var difusepiso = TL.load(dir+"/difuse.jpg" );
		var aotex = TL.load(dir+"/lightMap.png" );
		var matpiso =  new THREE.MeshStandardMaterial({ 
			lightMap : aotex,
			aoMap: aotex,
			metalnessMap: metalpiso,
			normalMap: normalpiso,
			map: difusepiso,
			roughnessMap : roughnesspiso,
			color: 0xffffff,
			envMap: scene.background,
			lightMapIntensity: 0.2,
			
			mapIntensity:0.2,
			roughness:0.4,
			metalness:0.0,

			envMapIntensity: 2.
			});
		

		a.getObjectByName("Piso").material = matpiso;

		a.scale.set(1.0,1.0,1.0);
		casa = a; 
		scene.add( a );

And this is the part that loads the skybox:

var dir ="http://biometriatb.com/proyectosingapur2/texturas/skybox/";
		dir = "texturas/skybox/";
	var reflectionCube = new THREE.CubeTextureLoader()
		.setPath( dir )
		.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
	reflectionCube.format = THREE.RGBFormat;
	scene.background = reflectionCube;

Everything works well in the localhost, but when i´ve upload it to my server. The skybox breaks and the floor does not even get the textures working.

My first thought was that something was happening with the paths. I´ve tryed to make them relative and absolute, (both with no luck for the floor). Directory seems to be fine thought, otherwise, the skybox would not work. BUT my floor is not working.

Any idea of why is this happening??

Here is full code : https://github.com/jpupper/proyectosingapur

Here is the version uploaded to the web : http://mmtt.com.ar/proyectosingapur2/

Update : I´ve made a version of the webgl_loadr_texture_basis.html example. Wich STILL works fine in my localhost but is NOT working when i host it . I´ve tryed hosting the example in two different websites :

http://biometriatb.com/julian/ejemplolucho/
http://mmtt.com.ar/ejemplolucho/

This is driving mad

Update 2 : So. Finally I log the console in my server, i was getting a warning saying that textures should be 8bit. I change my textures to that format and reupload them to the server. Now im not getting any error but STILL can´t see any textures.

I also tryed this example : https://threejs.org/examples/#webgl_geometry_cube in wich i´ve change the gif that comes with it (it does no work with the gif texture) to a png 8 bit texture. but it does not also work in my host.(it does work in the localhost).

Update 3 : what was weird to me , was that the skybox uploads the texture(allthought it breaks it) and the floor does not, so i´ve exchange the image files, putting the skybox image as floor and floor as skybox. This gives me that skybox is not visible on host and floor is. The main diference betwen both images is that the one that is JPG FILE works, but the PNG files does not.

So. Some JPG files are working, JPG with high specs does not and PNG 8 bit does not either.

So the question now is Why do PNG files don´t work .

What is the most optimized-good looking working format for textures in threejs?

You get no errors or warnings?

Unfortunately it takes a fair bit of work to get textures rendering in node.js. TextureLoader uses the browser’s Image APIs, which don’t exist in Node.js. Others have found various workarounds you can find in Stack Overflow and GitHub, this one looks promising: https://github.com/Automattic/node-canvas/issues/730

Not really. How do i get to see the console of what happens in my host?

But im not using Node.js .Should I? Im just uploading them to my website.

Is just putting a texture to the floor and upload it to my server, shouldn´t be that hard

1 Like

Oops sorry, I misread. If you’re not using node.js then never mind my comment.

Yeah I think this is a cors issue or something. Depending on the browser you should look for something called developer tools. Try f12 in chrome.

what was weird to me , was that the skybox uploads the texture(allthought it breaks it) and the floor does not, so i´ve exchange the image files, putting the skybox image as floor and floor as skybox. This gives me that skybox is not visible on host and floor is. The main diference betwen both images is that the one that is JPG FILE works, but the PNG files does not.

So. Some JPG files are working, JPG with high specs does not and PNG 8 bit does not either.

So the question now is Why do PNG files don´t work .

What is the most optimized-good looking working format for textures in threejs?

I dare to say that jpg would be that. It being straightforward, and being able to compress. It’s possible to compress textures in such a way that they stay compressed on the graphics card but jpg is not it. For that you could look into .dds But this is orders of magnitude more involved to load i think.

I find pngs somewhat iffy because of the way they handle alpha. To be safe, you could try loading jpgs first and foremost, then explore others as the need arises. You should definitely look at some console output as you are doing this, as it will give you hints on whats wrong / not as expected.

Thanks for your awnser! As you see, the console output does not output anything relevant : http://mmtt.com.ar/proyectosingapur3/

So you are saying that textures are not “load properly” ? It makes no sense that my localhost works like a charm and in the host everything seems to be kind of broken

IVE SOLVE IT.

Was a problem with the textures , the textures were not displaying correctly because the images files were corrupted. It was not a problem of three.js , it was a problem of filezilla wich it solves just by entering to :
Settings->transfers->FTP:file types, and change the “default transfer type” to Auto. NOT ASCII.

1 Like