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?