Sprite rotating original image

[Thulo_Maepa]

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

[Arthur]

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

[Thulo_Maepa]

Amazing. Thank you Arthur