How do I flip a Three.js texture vertically?

4
votes

I'm trying to display some panoramic images in my "Street View"-like application with Three.js .

I used the panorama example from the official webpage of Three.js as a base for the display of the images and it works OK. The problem is that my input images are flipped vertically. By vertical flip I mean the effect shown in this image.

So my question is if I can, somehow, flip the textures loaded from the images or the sphere geometry I apply the textures to, in order to view the images as it should be.

Thank you.

1
javascript3dthree.js
You can flip/rotate the images inside the application by modifying the texture coordinates. But the easiest method would be to flip the images outside your application, namely in the image editor program. - gaitat

1 Answers

7
votes

Luckily the vertical case is "natively" supported. Try with this:

texture.flipY = false;