Sprite rotating original image

I have a png I am looking to render in a canvas as a “plane” for other images to be rendered over it.

I’ve chosen to render it as a sprite with a z-index to determine depth-perception.

When i try render this:

It comes out all wrong :

react sprite code :
<sprite position={[positionX, positionY, positionZ]} scale={10}>


Please help

Sprites are squares, your image is a rectangle. You need to have your sprite use the same aspect ratio as your image.

In vanilla THREE.js, you would write sprite.scale.set( imageWidth / imageHeight, 1, 1), in R3F I guess that would look like scale={[ imageWidth / imageHeight, 1, 1 ]}


Amazing. Thank you Arthur

1 Like