Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 580
Pier Avatar asked Apr 30 '15 17:04

Pier


2 Answers

The answer was easier than I thought.

cylinder.scale.x = -1;

And don't forget to add

material.side = THREE.DoubleSide;
like image 190
Pier Avatar answered Oct 02 '22 12:10

Pier


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

like image 36
WestLangley Avatar answered Oct 02 '22 12:10

WestLangley