How to flip a Three.js texture horizontally

Question

I\'m making a 360 viewer, so textures are inside a cylinder. Problem is that they appear inverted horizontally.

I know about texture.flipY but I haven\'

Answer 1

The answer was easier than I thought.

cylinder.scale.x = -1;

And don't forget to add

material.side = THREE.DoubleSide;

Answer 2

Another approach here is to change the geometry. In the cylinder geometry you specify thetaStart and thetaLength for the cylinder section you want to render, and usually you choose a positive angle, i.e. thetaLength>0. If instead you pass thetaStart + thetaLength and -thetaLength to CylinderBufferGeometry, the cylinder is rendered clockwise instead of counter-clockwise, and all face normals now point inwards. So, there is no need to flip the texture anymore.

Answer 3

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 be a power-of-two in size.

three.js r.87