How to flip texture Three.js horizontally

I make 360 ​​viewers, so the textures are inside the cylinder. The problem is that they look inverted horizontally.

I know about texture.flipY, but I did not find texture.flipXin the source .

So, how can I flip the texture horizontally or along the x axis directly in the code? (without using the image editor)

+4
source share
3 answers

The answer was simpler than I thought.

cylinder.scale.x = -1;

And don't forget to add

material.side = THREE.DoubleSide;
+2
source

To flip a texture horizontally, you can do the following:

texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = - 1;

As mentioned in the comments, this approach requires the texture to have a half power.

three.js r.87

+9

texture.flipY translates to a WebGL call gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

There is no WebGL flag for gl.UNPACK_FLIP_X_WEBGL, so you have to flip your texture outside of the three .js using gimp, for example.

0
source

All Articles