How to flip the texture of a sprite along the x axis three js?

Question

I need to flip a sprite texture in the scene.

According to here, I should be able to set the scale to -1 in the direction that is needed to flip (x).

I wrote 2 examples that load a sprite with a texture:

• In the first case the scale is set to (1000, 1000, 1)
  
• In the second case the scale is set to (-1000, 1000, 1)
  

In the second case, scale.x is negated, so I expect the image to be flipped (mirrored) on the x axis, but the image still looks the same as in the first case.

How can I flip the texture of the sprite along the x axis?

---

EDIT: I found out that I can flip the image by using flipY (I did not find flipX) and rotating the image by 180 degrees. See here

Is this an acceptable way to flip the image?

Thanks,
Avner

1

Answer 1

Unlike with meshes, it's not possible to use Sprite.scale to render it mirrored. The recommended way of doing this is by transforming texture coordinates by setting Texture.repeat to (-1, 1) and Texture.center to (0.5, 0.5).

var camera, scene, renderer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();
		
    var loader = new THREE.TextureLoader();
    var map = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
    map.center.set( 0.5, 0.5 );
    map.repeat.set( - 1, 1 );

    var material = new THREE.SpriteMaterial( { map: map } );

    var sprite = new THREE.Sprite( material );
    scene.add( sprite );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
}
canvas {
  display: block;
 }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>