Flipped maps from Blender

Questions
, ,
1

Hello,

I’m trying to create a loader to load the 3D models I make in Blender using three.js on my website.
I’m fairly new to this.

My problem is simple. I create a model in Blender and everything works perfectly there.
I export the model {and the maps assigned to it} and when I import them on a using three.js the maps appear weird on the model. it looks like they are flipped. I can sort out the problem flipping the maps usign Photoshop or Gimp, but I’d like to know the reason why this happens. In Blender the normals point outside and no scale or rotation was applied to the model.

As you can see in this image in Blender the map is perfect, but when I load it on my webpage it seems flipped somehow.
From a different experiment I did, I know that the image is flipped horizontally. Is this something common?

blender_threejs

Thank you for your help!

2

What 3D format are you using? It be also helpful if you can share the blend and exported file in this thread.

3

It’s seem your normal map not correct ! Lets scale object with -1 and flip your normal map in blender edit mode (face)

4

Hello doum and Mugen87.
I tried to do that, but in that case the whole model result flipped.
I flipped the map vertically using Photoshop and the model is ok… but is kinda weird that every time I export something in GLtf the map becomes flipped when I import it in three.js.

This happened with any other model I exported from Blender. The maps work fine in Blender but in three.js they are flipped.

Do you know if there is a way to flip them directly in three.js?

5

I solved…
Basically I need to avoid the texture to be flipped on the Y axes

the code is:

texture.flipY = false;

I m kinda happy of the final result…
I still need to work on it, but slowly slowly it will come out…

47
471850×1432 441 KB

6

This should not be necessary. I guess you just run into a known bug in three.js version R102. Can you please try it with the latest dev version? It is already fixed there.

7

Hi Mugen87,

I tried to download the lastest dev version, but all I find online is the R102 {that from what I understood was bugged}.

I’m probably looking in the wrong place… do you have any advices?

In the meantime I managed to upload my model and it seems working fine.
At the moment I’ve used the .flipY option.
Unfortunately this doesn’t work for the skycube as a .flipX option doesn’t exist.

53

I’d like to create a kind of template to be able to upload my models into my website… so even if I had to flip all the maps wouldn’t be a problem, as long as this is consistent.

Very many thanks for your help!!!

8

Try it with on of these build files:

9

Hello!
Thank you for this…

I tried to download the new version you sent but nothing has changed. The maps are still inverted as you can see in the background cube.
I already exported the maps to be used to create the sky cube, but being inverted I cannot make them seamless. Maybe I should invert them using GIMP?

17

This is the code I used:

var textureLoader = new THREE.TextureLoader();

var fronte = textureLoader.load("immagini/testGrid.jpg");

var materialiCubo = 
            [
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide}),
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide}),
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide}),
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide}),
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide}),
                new THREE.MeshBasicMaterial({map: fronte, side: THREE.BackSide})
            ];

var geometriaCubo = new THREE.BoxGeometry(500, 500, 500);

var cubo = new THREE.Mesh(geometriaCubo, materialeCubo);
   scene.add(cubo);

I didn’t flip the maps at the moment, but flipping them results in the same…
This is the map I use to test it…
testGrid