CODEWITHSUNDEEP
javascriptthree.js
Pier
Pier

Reputation: 10837

How to flip a Three.js texture horizontally

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't found a texture.flipX on the source.

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

Upvotes: 17

Views: 22162

Answers (4)

WestLangley
WestLangley

Reputation: 104833

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

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

three.js r.147

Upvotes: 28

Hunor Márton Borbély
Hunor Márton Borbély

Reputation: 41

It might seem a bit of an overkill, but I think a nice way to do it is to turn it by 180 degrees (PI radians) around it's center then flip it:

texture.center = new THREE.Vector2(0.5, 0.5);
texture.rotation = Math.PI;
texture.flipY = false;

Upvotes: 4

Elmar Zander
Elmar Zander

Reputation: 1516

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.

Upvotes: 0

Pier
Pier

Reputation: 10837

The answer was easier than I thought.

cylinder.scale.x = -1;

And don't forget to add

material.side = THREE.DoubleSide;

Upvotes: 17

Related Questions