CODEWITHSUNDEEP
three.js
Avner Moshkovitz
Avner Moshkovitz

Reputation: 1374

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

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 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

Upvotes: 4

Views: 1592

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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>

Upvotes: 4

Related Questions